Вопросы Теги

разрешить пользователям редактировать элемент option [duplicate] 

func bridge<T : AnyObject>(obj : T) -> UnsafePointer<Void> {
return UnsafePointer(Unmanaged.passUnretained(obj).toOpaque())
}


func bridge<T : AnyObject>(ptr : UnsafePointer<Void>) -> T {
return Unmanaged<T>.fromOpaque(ptr).takeUnretainedValue()
}

func bridgeRetained<T : AnyObject>(obj : T) -> UnsafePointer<Void> {
return UnsafePointer( Unmanaged.passRetained(obj).toOpaque())}

func bridgeTransfer<T : AnyObject>(ptr : UnsafePointer<Void>) -> T {
return Unmanaged<T>.fromOpaque(ptr).takeRetainedValue()}
56
задан birdus 31 January 2013 в 00:03
поделиться

10 ответов

До datalist (см. примечание ниже) вы должны предоставить дополнительный элемент input для людей, чтобы ввести свой собственный вариант. 

<select name="example">
    <option value="A">A</option>
    <option value="B">A</option>
    <option value="-">Other</option>
</select>

<input type="text" name="other">

Этот механизм работает во всех браузерах и не требует JavaScript .

Вы можете использовать небольшой JavaScript, чтобы быть умным только показывая input, если была выбрана опция «Другой».

datalist Element

datalist призван обеспечить лучший механизм для этой концепции. Важно отметить, что у него нет поддержки в Safari, iOS Safari или Opera Mini. В реализации Internet Explorer также есть некоторые проблемы. Эта информация будет устаревшей, поэтому для получения более подробной информации проверьте Могу ли я использовать текущую поддержку datalist . 

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
    <option value="A">
    <option value="B">
</datalist>
70
ответ дан Annabel 21 August 2018 в 15:01
поделиться

Пример dojo здесь не работает, когда применяется в существующем коде в большинстве случаев. Поэтому мне пришлось найти альтернативу, найденную здесь - hxxp: //technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (теперь указывает на спам-сайт или хуже )

archive.org (не очень полезно)

Вот jsfiddle - https://jsfiddle.net/ze7fgby7/

6
ответ дан Andre 21 August 2018 в 15:01
поделиться 
    <html>
<head>
    <title></title>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            $('#selectnumber').change(function(){
                alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
            })
        });
    </script>
</head>
<body>
       <div>
        <select id="selectnumber">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
        </select>

    </div>
   </body>
</html>

Спасибо ...:)

-2
ответ дан Bhanu pratap 21 August 2018 в 15:01
поделиться
  • 1
    Всегда хорошая идея включить некоторые детали или объяснения, почему ваш ответ работает. – Charlie Fish 9 August 2016 в 17:41
  • 2
    Хотя этот фрагмент кода может решить вопрос, , включая объяснение , действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин вашего предложения кода. Также попробуйте не толковать код с пояснительными комментариями, так как это уменьшает читаемость кода и объяснений! – FrankerZ 10 August 2016 в 00:05

Учитывая, что тег datalist HTML по-прежнему не полностью поддерживается, альтернативный подход, который я использовал, - это Dojo Toolkit ComboBox . Это было легче реализовать и лучше документировать, чем другие варианты, которые я изучил. Он также хорошо сочетается с существующими структурами. В моем случае я добавил этот combobox на существующий веб-сайт, основанный на Codeigniter и Bootstrap, без проблем. Вам просто нужно обязательно применить тему Dojo (например, class = "claro") к родительскому элементу combo вместо тега body чтобы избежать конфликтов стиля.

Сначала включите CSS для одной из тем Dojo (например, Claro). Важно, чтобы файл CSS был включен до файлов JS ниже. 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" />

Затем включите jQuery и Dojo Toolkit через CDN 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>

. Затем вы можете просто следовать Пример кода Доджо или используйте образец ниже, чтобы получить рабочую сводку. 

<body>
    <!-- Dojo Dijit ComboBox with 'Claro' theme -->
    <div class="claro"><input id="item_name_1" class=""/></div>

    <script type="text/javascript">
        $(document).ready(function () {
            //In this example, dataStore is simply an array of JSON-encoded id/name pairs
            dataStore = [{"id":"43","name":"Domain Name Renewal"},{"id":"42","name":"Hosting Renewal"}];

            require(
                [ "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], 
                function (Memory, ComboBox) {
                    var stateStore = new Memory({
                        data: dataStore
                    });

                    var combo = new ComboBox({
                        id: "item_name_1",
                        name: "desc_1",
                        store: stateStore,
                        searchAttr: "name"},                        
                        "item_name_1"
                        ).startup();

                });

        });

    </script>
</body>
1
ответ дан Flareman2020 21 August 2018 в 15:01
поделиться

Посмотрите ComboBox или Combo на этом сайте: http://www.jeasyui.com/documentation/index.php#

-1
ответ дан kmb 21 August 2018 в 15:01
поделиться
  • 1
    Это не настоящий комбинированный блок, потому что вы не можете добавлять новые данные. – Arnout 10 May 2014 в 16:51
  • 2
    Комбо на этой странице хуже, чем стандартный html select. – webzy 24 April 2016 в 19:49

Ну, это 2016 год, и до сих пор нет простого способа сделать комбо ... конечно, у нас есть datalist, но без поддержки safari / ios это не очень удобно. По крайней мере, у нас есть ES6 .. ниже - попытка комбо-класса, который обертывает div или span, превращая его в комбо, помещая поле ввода поверх выбора и привязывая соответствующие события.

см. код в: https://github.com/kofifus/Combo

(код основывается на шаблоне класса из https://github.com/kofifus / New )

Создание комбо очень просто! просто передайте div его конструктору: 

let mycombo=Combo.New(document.getElementById('myCombo'));
mycombo.options(['first', 'second', 'third']);

mycombo.onchange=function(e, combo) {
  let val=combo.value;
  // let val=this.value; // same as above
  alert(val);
 }
<script src="https://rawgit.com/kofifus/New/master/new.min.js"></script>
<script src="https://rawgit.com/kofifus/Combo/master/combo.min.js"></script>

<div id="myCombo" style="width:100px;height:20px;"></div>

4
ответ дан kofifus 21 August 2018 в 15:01
поделиться

Эта ссылка может вам помочь: http://www.scriptol.com/html5/combobox.php

У вас есть два примера. Один в html4 и другой в html5

HTML5 

<input type="text" list="browsers"/>
 <datalist id="browsers">
    <option>Google</option>
    <option>IE9</option>
 </datalist>

HTML4 

 <input type="text" id="theinput" name="theinput" />
 <select name="thelist" onChange="combo(this, 'theinput')">
   <option>one</option>
   <option>two</option>
   <option>three</option>
 </select>

 function combo(thelist, theinput) {
     theinput = document.getElementById(theinput);
     var idx = thelist.selectedIndex;
     var content = thelist.options[idx].innerHTML;
     theinput.value = content;
 }
18
ответ дан Krzysztof Janiszewski 21 August 2018 в 15:01
поделиться
  • 1
    Хотя эта ссылка может ответить на вопрос, лучше включить здесь основные части ответа и предоставить ссылку для справки. Ответные ссылки могут стать недействительными, если связанная страница изменится. – Joel 21 November 2013 в 19:39

Мое решение очень простое, выглядит как родной редактируемый combobox и работает даже в IE6 (некоторые ответы здесь требуют большого количества кода или внешних библиотек, и результат получается так, например, текст в текстовом поле идет за выпадающего значка части combobox или вообще не похожа на редактируемую combobox).

Дело в том, что для обрезки выпадающего значка нужно вырезать только раскрывающийся значок над текстовым полем. И текстовое поле широко расположено под частью combobox, поэтому вы не видите его правый конец - визуально продолжается с помощью combobox: https://jsfiddle.net/dLsx0c5y/2/ 

select#programmoduleselect
{
    clip: rect(auto auto auto 331px);
    width: 351px;
    height: 23px;
    z-index: 101; 
    position: absolute;
}

input#programmodule
{
    width: 328px;
    height: 17px;
}

<table><tr>
<th>Programm / Modul:</th>
<td>
    <select id="programmoduleselect"
        onchange="var textbox = document.getElementById('programmodule'); textbox.value = (this.selectedIndex == -1 ? '' : this.options[this.selectedIndex].value); textbox.select(); fireEvent2(textbox, 'change');"
        onclick="this.selectedIndex = -1;">
        <option value=RFEM>RFEM</option>
        <option value=RSTAB>RSTAB</option>
        <option value=STAHL>STAHL</option>
        <option value=BETON>BETON</option>
        <option value=BGDK>BGDK</option>
    </select>
    <input name="programmodule" id="programmodule" value="" autocomplete="off"
        onkeypress="if (event.keyCode == 13) return false;" />
</td>
</tr></table>

(Используется первоначально, например, здесь, но не отправляйте форму: old.dlubal.com/WishedFeatures.aspx)

EDIT: стили должны быть немного разными для macOS: Ch ​​в порядке, поскольку FF увеличивает высоту combobox, Safari и Opera игнорируют высоту combobox, поэтому увеличьте их размер шрифта (имеет верхний предел, а затем немного уменьшите высоту текстового поля): https: / /i.stack.imgur.com/efQ9i.png

2
ответ дан Ladislav Zima 21 August 2018 в 15:01
поделиться
  • 1
    Это очень сработало для меня, не беспокоясь о различиях браузера – cycle4passion 25 January 2018 в 17:18

в HTML, вы делаете это в обратном порядке: вы определяете ввод текста и присоединяете к нему datalist. (обратите внимание на атрибут списка ввода). 

<input type="text" list="browsers" />

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

46
ответ дан mpen 21 August 2018 в 15:01
поделиться

Это намного меньше, не требует jquery и работает лучше в сафари. https://github.com/Fyrd/purejs-datalist-polyfill/

Проверьте, есть ли проблемы для изменения, чтобы добавить downarrow. https://github.com/Fyrd/purejs-datalist-polyfill/issues

2
ответ дан tdolphin 21 August 2018 в 15:01
поделиться
Другие вопросы по тегам:

Похожие вопросы: