【问题标题】:Populate Drop Down List using jquery from textbox使用文本框中的 jquery 填充下拉列表
【发布时间】:2011-04-01 09:06:23
【问题描述】:

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

【问题讨论】:

    标签: javascript jquery jquery-mobile


    【解决方案1】:

    我相信是因为

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

    您不是将这些元素的 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 = "";
    }
    

    【讨论】:

    • 我尝试使用上面的代码..但是下拉列表中没有添加文本框值..还有其他帮助吗??
    • 在我做一些调试之前..你为什么不使用他们的代码?反正你也改不了。您只是更改了查找元素的方式(纯 js 而不是 jQuery。我为您的案例发布了 wrking 代码。
    • 现在我更困惑了.. 所以我做了两个不同的链接.. 目前我正在处理这个链接 (www-rohan.sdsu.edu/~verma1/whitneyExpense/testing1.html) 并且我希望文本框值进入下拉列表并且在此它无法正常工作,因为您可以尝试插入...。但是在此链接(www-rohan.sdsu.edu/~verma1/whitneyExpense/testing.html)上,相同的代码工作正常。值正在插入下拉列表中。有什么问题? ?? bcoz 的一些 jquery 插件??
    【解决方案2】:

    既然你已经在使用 jQuery:

    function addCombo() {
        var optName = $("#other").attr("value");
        $('#category').append("<option value='"+ optName + "'>" + optName  + "</option>");
        $("#other").attr("value", "");
    }
    

    【讨论】:

    • @crocodilewings 我尝试使用上面的代码..但是下拉列表中没有添加文本框值..有什么建议吗??
    • 您是否在使用调试器,例如 Firebug?什么,如果有的话,被附加到选择元素?
    • @dampe 现在我更困惑了.. 所以我做了两个不同的链接.. 目前我正在处理这个链接 (www-rohan.sdsu.edu/~verma1/whitneyExpense/testing1.html) 并且我希望文本框值进入 drop下拉列表,在此它无法正常工作,因为您可以尝试插入...。但在此链接(www-rohan.sdsu.edu/~verma1/whitneyExpense/testing.html)上,相同的代码工作正常。值正在插入下拉列表中。什么是问题???
    • @Raihan Jamal:第一个实际上并没有使用 元素的内容从其他元素构建一个类似列表的显示。页面加载后添加到
    • @crocodilewings 我没有为该选择元素使用任何脚本。或者我缺少什么??
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-06-08
    • 2015-11-16
    • 2011-08-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多