从文本框中使用 jquery mobile 填充下拉列表

Posted

技术标签:

【中文标题】从文本框中使用 jquery mobile 填充下拉列表【英文标题】:Populate Drop Down List using jquery mobile from textbox 【发布时间】:2011-04-01 18:00:22 【问题描述】:

我有一个 id 为 other 的文本框,我想将此文本框值填充到下拉列表中 这是我用来填充的 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" >
                    <option  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>

【问题讨论】:

【参考方案1】:
<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...如果您不想输入输入...设置 data-role="none"

【讨论】:

@mc_fish 非常感谢...你让我度过了愉快的一天...真的很感激:)...你能简单介绍一下你的代码吗..这样我才能正确理解..!! 移动图书馆调整了一些元素,使其对用户友好!我做了什么?刚刚添加到 ul #-menu(jquery 创建的)一个 li 像其他人一样......可能有一个错误,你应该追加到“新”元素 #-menu 和 .custom_values @mc_fish 代码运行良好.. 假设我们将 hello 添加到下拉列表中.. 然后我们打开下拉列表查看 hello,然后 hello 在那里但我们无法选择那个你好..!!有什么建议吗?? $(".custom_select").append("") 将其添加到选择并添加到ul @mc_fish 所以应该是这样的,' ') $(".custom_select") .append("") ); ); '【参考方案2】:
<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>

我刚试过的代码和它的作品! P>

【讨论】:

@ mc_fish那么清楚我已经上我的工作链接的混乱。这是我工作的联系,在此它不工作..让我知道我在做错误的??我已经做了,你告诉我的方式相同.. !! (www-rohan.sdsu.edu/~verma1/whitneyExpense/testing1.html)跨度> @ mc_fish我想简单的jQuery工作正常..但只要我进口一些jQuery Mobile的插件..它停止工作。至于我得工作,jQuery Mobile的...我认为这是它不工作bcoz jQuery Mobile的主要原因.. !!任何帮助将不胜感激..!!谢谢... SPAN> 其因为EXPDB = window.openDatabase(SHORTNAME,版本,显示名,MAXSIZE);你有一个的错误......现在三样东西:1,如果u需要在飞行中使用AJAX SQL操作不使用数据库使用JS ...使用php,JAVA,ASP什么,但不要JS 2,3ū拥有jQuery的包括两次! SPAN> @ mc_fish我已取出所有的数据库部分。由于我们有使用jquery移动本身连接到数据库。现在我更糊涂了。所以我做了两个不同的环节。目前,我正在此链接(www-rohan.sdsu.edu/~verma1/whitneyExpense/testing1.html),并在此我想要的文本框的值来进入下拉列表,在此,你可以它不能正常工作通过inserting..But尝试此链接(www-rohan.sdsu.edu/~verma1/whitneyExpense/testing.html)相同的代码工作正常价值是越来越插入下拉列表中有什么问题?bcoz的一些上jQuery插件?跨度> duno但有错误......安装萤火如果u打算开发网络应用程序PS。错误是在上面的注释(删除,看看它的工作原理)编辑:其选择修改的,因为......对于追加的路径是错误的 SPAN> 【参考方案3】:

在 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>")
);

【讨论】:

感谢您的回复...所以脚本标签将是这样的:- '' 不,您需要包含 jquery(这是用于 jquery 库的)它使 javascript 保持“简单”,我只能推荐它:) 我无法理解..你能从我上面给出的例子中简单介绍一下吗..这对我有很大的帮助......!! jquery.com 在那里下载库并将其添加到您的页面或从谷歌链接它。 的库 也不能这样工作..我试过这样......''

以上是关于从文本框中使用 jquery mobile 填充下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 脚本在文本框中显示 NaN,如何删除 NaN? [复制]

从MySQL加载数据并使用jQuery Mobile,PHP选择填充下拉列表

Jquery ui自动完成填充带有ID​​的隐藏字段

加载新页面后未呈现文本 - JQuery Mobile

在 jquery-mobile 中使用 ajax 数据填充页面并不总是有效

如何从列表框中填充文本框?