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

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

    <script>
        function addCombo() {
            var optName = $("#other").attr("value");
            $('#category').append("<option value='"+ optName + "'>" + optName  + "</option>");
            $("#other").attr("value", "");
   $('#category').selectmenu('refresh', true);
        }
    </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>

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

Ответы (3)


arrow_upward
1
arrow_downward 

<script type="text/javascript">
$(function(){
    $(".add_button").click(function(){
        $("#-menu").append('<li class="ui-btn ui-btn-icon-right ui-li ui-btn-up-b" data-icon="false" role="option" tabindex="-1" data-theme="b" aria-selected="false"><div class="ui-btn-inner"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">'+$(".what_to_add").val()+'</a></div></div></li>')
    });
});
</script>

это работает... это было из-за jquery mobile... если вы не хотите вводить данные pasre... установите data-role = "none"

person mc_fish    schedule 01.04.2011
comment
@mc_fish большое спасибо... ты сделал мой день... очень признателен :)... Не могли бы вы просто вкратце описать свой код.. Чтобы я мог правильно понять..!! - person arsenal; 02.04.2011
comment
мобильная библиотека адаптировала некоторые элементы, чтобы они были удобными для пользователя! что я сделал? только что добавил в ul #-menu (созданный jquery) li, как и другие... может быть ошибка, вы должны добавить как в новый элемент #-menu, так и в .custom_values - person mc_fish; 02.04.2011
comment
@mc_fish Код работает нормально .. Предположим, мы добавляем приветствие в раскрывающийся список .. а затем открываем раскрывающийся список, чтобы увидеть приветствие, затем приветствие есть, но мы не можем выбрать это приветствие .. !! Какие-либо предложения?? - person arsenal; 02.04.2011
comment
$(.custom_select).append(‹option›+$(.what_to_add).val()+‹/option›) добавить его в выбор и в ul - person mc_fish; 02.04.2011
comment
@mc_fish, поэтому должно быть так: '‹script type=text/javascript› $(function(){ $(.add_button).click(function(){ $(#-menu).append('li class= ui-btn ui-btn-icon-right ui-li ui-btn-up-b data-icon=false role=option tabindex=-1 data-theme=b aria-selected=false›‹div class=ui-btn -inner›‹div class=ui-btn-text›‹a href=# class=ui-link-inherit›'+$(.what_to_add).val()+'‹/a›‹/div›‹/div ›‹/li›') $(.custom_select).append(‹option›+$(.what_to_add).val()+‹/option›) }); }); ‹/скрипт›' - person arsenal; 02.04.2011
comment
@mc_fish, каким должен быть фактический синтаксис и где я должен добавить эту строку .. !! Спасибо.. - person arsenal; 02.04.2011

arrow_upward
1
arrow_downward 

<div>
    <input type="text" class="what_to_add">
    <input type="button" value="add" class="add_button">
    <select class="custom_select">
    </select>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".add_button").click(function(){
        $(".custom_select").append("<option>"+$(".what_to_add").val()+"</option>")
    });
});
</script>

Я только что попробовал код, и он работает!

person mc_fish    schedule 01.04.2011
comment
@mc_fish Итак, устраните путаницу, я сделал ссылку, над которой я работаю .. Это ссылка, над которой я работаю, здесь она не работает .. дайте мне знать, где я делаю неправильно ?? Я сделал так же, как вы сказали мне..!! ( www-rohan.sdsu.edu/~verma1/whitneyExpense/testing1.html ) - person arsenal; 01.04.2011
comment
@mc_fish Я думаю, что простой jquery работает нормально .. но как только я импортирую некоторые мобильные плагины jquery .. он перестает работать .. Поскольку мне приходится работать с jquery mobile ... Я думаю, что это основная причина, по которой это не так. рабочий bcoz jquery mobile..!! Любая помощь будет оценена ..!! Спасибо... - person arsenal; 01.04.2011
comment
потому что EXPDB = window.openDatabase(shortName, version, displayName, maxSize); у вас там ошибка... теперь 3 вещи: 1. не используйте js для использования базы данных... используйте php, java, asp что угодно, но не js 2. если вам нужно манипулировать sql на лету, используйте ajax, 3. u дважды включили jquery! - person mc_fish; 01.04.2011
comment
@mc_fish Я удалил всю часть базы данных. Поскольку нам нужно подключиться к базе данных, используя сам jquery mobile. И теперь я еще больше запутался.. Поэтому я сделал две разные ссылки. В настоящее время я работаю над этой ссылкой (www-rohan.sdsu.edu/~verma1/whitneyExpense/testing1.html), и я хочу, чтобы значение текстового поля попало в раскрывающийся список, и в этом оно не работает должным образом, как вы можете попробуйте вставить.. Но по этой ссылке (www-rohan.sdsu.edu/~verma1/whitneyExpense/testing.html) тот же код работает нормально Значение вставляется в раскрывающийся список, в чем проблема??bcoz некоторых jquery-плагины? - person arsenal; 01.04.2011
comment
duno, но есть ошибка ... установите firebug, если вы собираетесь разрабатывать веб-приложения, ps. ошибка находится в комментарии выше (удалите и посмотрите, работает ли он) редактировать: это из-за модификации выбора... путь для добавления неверен - person mc_fish; 01.04.2011
comment
@mc_fish неверный путь для добавления, если это так, то почему он работает в другой ссылке (testing.html).. Есть что-то, что нужно сделать с мобильными плагинами jquery..!! - person arsenal; 01.04.2011
comment
Плагин jquery droplist заменил select некоторыми из его собственных тегов ... если у вас все еще есть проблемы ... я помогу, но постараюсь решить их самостоятельно, чтобы узнать, как учиться :) - person mc_fish; 01.04.2011
comment
@mc_fish Я работаю над этим прошлой ночью и до сих пор не смог понять.. Я пробовал несколько способов.. Вот почему я работал с двумя ссылками.. просто чтобы знать, где я делаю неправильно. , ваша помощь будет оценена ..!! - person arsenal; 01.04.2011
comment
что делает выбор манипуляции, выпадающий список? я отлаживал сайт... он выполняет свою работу, но не перезапускает дроплист, вот в чем проблема... просто нужно название плагина - person mc_fish; 02.04.2011
comment
@mc_fish Да, часть выбора - это раскрывающийся список ... о каком плагине вы говорите ... все есть в самом коде ... - person arsenal; 02.04.2011

arrow_upward
0
arrow_downward

в jquery это будет примерно так:

<div>
    <input type="text" class="what_to_add">
    <input type="button" value="add" class="add_button">
    <select class="custom_select">
    </select>
</div>

$(".add_button").click(function(){
    $(".custom_select").append("<option>"+$(".what_to_add").val()+"</option>")
});
person mc_fish    schedule 01.04.2011
comment
Спасибо за ответ... Итак, тег скрипта будет таким: - '‹SCRIPT language=javascript› $(.add_button).click(function(){ $(.custom_select).append(‹option›+$(.what_to_add ).val()+‹/опция›) }); ‹/СЦЕНАРИЙ›' - person arsenal; 01.04.2011
comment
нет, вам не нужно включать jquery (это было для библиотеки jquery), это упрощает javascript, я могу только рекомендовать его :) - person mc_fish; 01.04.2011
comment
Я не мог понять.. Не могли бы вы просто кратко рассказать мне о моем примере, приведенном выше.. Это мне очень поможет...!! - person arsenal; 01.04.2011
comment
jquery.com загрузите оттуда библиотеку и добавьте ее на свою страницу или свяжите ее с Google, т.е. ‹script type=text/javascript src=ajax .googleapis.com/ajax/libs/jquery/1.4/›, затем запустите библиотеку, например, ‹script›$(function(){здесь идет код из более раннего });‹/script› - person mc_fish; 01.04.2011
comment
так тоже не работает. Я пробовал так... '‹script› $(.add_button).click(function(){ $(.custom_select).append(‹option›+$(.what_to_add).val( )+‹/опция›) }); ‹/скрипт›' - person arsenal; 01.04.2011