Заполнить выпадающий список с помощью jquery из текстового поля

У меня есть текстовое поле с другим идентификатором, и я хочу заполнить это значение текстового поля в раскрывающемся списке. Это javascript, который я использую для заполнения... но это не работает. Любое предложение будет оценено...!! Я хочу сделать так: - http://viralpatel.net/blogs/demo/dynamic-combobox-listbox-dropdown-in-javascript.html

<SCRIPT language="javascript"> 
function addCombo() {
    var textb = $('#other').attr('id');
    var combo = $('#category').attr('id');
    alert(combo);

    var option = document.createElement("option");
    option.text = $('#other').val();
    alert(option.text);
    option.value = $('#other').val();
    try {
        combo.add(option, null); //Standard 
    }catch(error) {
        combo.add(option); // IE only
    }
    textb.value = "";
}
</SCRIPT>

Это код выпадающего списка

<td>Category</td>
                    <td><select class="size" id="category" name="category" width="30px">
                    <option width="30px" value="" selected="selected" >Select</option>
                    <option value="food">Food</option>
                        <option value="rent">Rent</option>
                        <option value="gas">Gas</option>
                        <option value="enter">Entertainment</option>
                        <option value="grocery">Grocery</option>
                        <option value="general">General</option>
                        <option value="other">Other</option></select></td>
                        </tr>
                        <tr>
                        <td>Other</td>
                        <td><input type="text" id="other" name="other"/></td>
                        <td><input type="button" data-role="button" value="Add" onclick="addCombo()"></td>
                        </tr>

person arsenal    schedule 01.04.2011    source источник


Ответы (2)


Я верю, потому что

var textb = $('#other').attr('id');
var combo = $('#category').attr('id');

Разве вы не присваиваете идентификаторы этих элементов переменным, а не элементам?
Я имею в виду... действительно ли textb является элементом ввода после выполнения этого кода или это просто строка «другое»?

Попробуй это:

var textb = $('#other');
var combo = $('#category');

Редактировать:

function addCombo() {
    var textb = document.getElementById("other");
    var combo = document.getElementById("category");

    var option = document.createElement("option");
    option.text = textb.value;
    option.value = textb.value;
    try {
        combo.add(option, null); //Standard 
    }catch(error) {
        combo.add(option); // IE only
    }
    textb.value = "";
}
person Damb    schedule 01.04.2011
comment
Я попытался использовать приведенный выше код. Но значение текстового поля не было добавлено в раскрывающийся список. Любая другая помощь?? - person arsenal; 01.04.2011
comment
Прежде чем я займусь отладкой... почему вы просто не используете их код? Вы все равно его не меняете. Вы только что изменили способ поиска элементов (чистый js вместо jQuery. Я разместил рабочий код для вашего случая. - person Damb; 01.04.2011
comment
Теперь я еще больше запутался. Поэтому я сделал две разные ссылки. В настоящее время я работаю над этой ссылкой (www-rohan.sdsu.edu/~verma1/whitneyExpense/testing1.html), и я хочу, чтобы значение текстового поля попадало в раскрывающийся список, и в этом оно не работает должным образом как можно попробовать вставив.... А вот по этой ссылке(www- rohan.sdsu.edu/~verma1/whitneyExpense/testing.html) тот же код работает нормально.. Значение вставляется в выпадающий список.. в чем проблема??? bcoz некоторых плагинов jquery?? - person arsenal; 01.04.2011

Поскольку вы уже используете jQuery:

function addCombo() {
    var optName = $("#other").attr("value");
    $('#category').append("<option value='"+ optName + "'>" + optName  + "</option>");
    $("#other").attr("value", "");
}
person R Hill    schedule 01.04.2011
comment
@crocodilewings Я пытался использовать приведенный выше код.. Но значение текстового поля не было добавлено в раскрывающийся список.. Есть предложения?? - person arsenal; 01.04.2011
comment
Используете ли вы отладчик, например Firebug? Что, если что, добавляется к элементу select? - person R Hill; 01.04.2011
comment
@dampe Теперь я еще больше запутался .. Поэтому я сделал две разные ссылки .. В настоящее время я работаю над этой ссылкой (www-rohan.sdsu.edu/~verma1/whitneyExpense/testing1.html), и при этом я хочу, чтобы значение текстового поля попадало в выпадающий список, а в этом нет работает правильно, как вы можете попробовать, вставив.... Но по этой ссылке (www-rohan.sdsu.edu/~verma1/whitneyExpense/testing.html) тот же код работает нормально.. Значение вставляется в выпадающий список.. в чем проблема??? - person arsenal; 01.04.2011
comment
@Raihan Jamal: Первый на самом деле не использует элемент ‹select› для представления списка. У него есть скрипт, который строит список из других элементов при загрузке страницы, используя содержимое элемента ‹select›. Все, что затем добавляется в ‹select› после загрузки страницы, не будет отображаться в виде списка. - person R Hill; 01.04.2011
comment
@crocodilewings Я не использую какой-либо скрипт для этого элемента select .. Или я что-то упустил ?? - person arsenal; 01.04.2011
comment
@crocodiwings: О, хороший улов! этого я не видел ;) - person Damb; 01.04.2011
comment
@dampe @crocodilewings Есть предложения?? Я читал в Интернете и нашел это: - Q24(b). Если я включу JQuery, я смогу заполнить элемент управления SELECT и/или элемент управления UL категориями, которые у меня есть в базе данных. Без каких-либо других изменений, если все, что я делаю, это включаю мобильный JQuery для стилизации моего приложения, тогда код для заполнения SELECT перестает работать, но заполнение элемента управления UL все еще работает. Я не получаю никаких ошибок или предупреждений в отладчике Google Chrome. А. Вы обновляете SELECT? Посмотреть обновить Выбрать - person arsenal; 01.04.2011
comment
@Raihan Jamal: это делает jquery-mobile. Он берет элемент ‹select› и делает для него более красивый интерфейс в стиле мобильных устройств. Он просто не обновляет внешний интерфейс, когда добавляется ‹select›. - person R Hill; 01.04.2011
comment
@crocodilewings Да, я узнал об этом, когда начал работать над двумя ссылками... Одна работает нормально, другая нет... Так что мне делать..? - person arsenal; 01.04.2011
comment
@Raihan Jamal: это объясняет, как обновить ваш выбор. - person R Hill; 01.04.2011
comment
Сорри, у меня нет опыта работы с jQuery mobile. Я предполагаю, что вам нужно будет обнаружить эту возможность обновления. Или найдите, какая функция вызывается для передачи select в список. И затем вызывайте эту функцию каждый раз, когда вы добавляете новую опцию выбора. Или можно конечно добавить ‹li› вместо ‹option›, но тогда придется как-то обрабатывать отправку значений из списка. - person Damb; 01.04.2011
comment
@dampe Большое спасибо за вашу помощь .. @crocodilewings Итак, за обновление моего выбора .. на самом деле это синтаксис, который я должен сделать ... И он будет в теге сценария ?? // $(#selectbox).html(optionList).selectmenu('refresh', true); $(#category).html(option).selectmenu('обновить', true); - person arsenal; 01.04.2011
comment
@Raihan Jamal: я думаю, вам просто нужно $('#category').selectmenu('refresh'); после кода, который добавляет поле выбора. - person R Hill; 01.04.2011
comment
@crocodilewings Большое спасибо за помощь... Но этот тоже не работает.. Я написал так: -- ' ‹SCRIPT language=javascript› function addCombo() { var optName = $(#other).val( ); оповещение (имя_оптимы); $('#category').append(‹option value='+ optName + '› + optName + ‹/option›); $(#other).attr(значение, ); $('#category').selectmenu('обновить'); } ‹/СКРИПТ› ' - person arsenal; 01.04.2011
comment
Попробуйте добавить $('#category').selectmenu('refresh', true); так как я думаю, что это заставит перестроить меню. Этот вопрос о переполнении стека кажется той же проблемой. - person R Hill; 01.04.2011
comment
@crocodilewings Я думаю, что я делаю что-то не так .. вышеприведенное тоже не работает у меня правильно ... !! Я делаю так. Вы можете проверить ссылку (www-rohan. sdsu.edu/~verma1/whitneyExpense/testing1.html) '‹SCRIPT language=javascript› function addCombo() { var optName = $(#other).attr(value); оповещение (имя_оптимы); $('#category').append(‹option value='+ optName + '› + optName + ‹/option›); $(#other).attr(значение, ); $('#category').selectmenu('обновить', правда); } ‹/СКРИПТ›' - person arsenal; 01.04.2011
comment
Любая другая помощь будет очень признательна, так как я все еще не могу сделать это правильно...!! - person arsenal; 01.04.2011
comment
Все из подсказок здесь. Вы можете попробовать просмотреть документацию для jquery mobile. - person R Hill; 01.04.2011
comment
@crocodilewings Anywaz спасибо за вашу помощь .. очень ценю вашу помощь ... Я не знаю, как я теперь это сделаю ... :( - person arsenal; 02.04.2011