Question

我使用jquery进行动态下拉。我正在将数据放入下拉列表但是当我选择特定项目时，它会在列表中获取第一个记录。

我的编码：此函数是来自ajax的响应。

function updateItem()
{
    var item= xmlhttp.responseXML.getElementsByTagName("ExpenseType");
    var itemId = "0";
    var itemName = "--";
    document.getElementById("reportAhcc_Item_ID_S").length = 0;
    if(item.length != "0")
    {
        for(var i=0;i<item.length;i++)
        {
            itemId=item[i].getElementsByTagName("ItemId")[0].childNodes[0].nodeValue;
            itemName=item[i].getElementsByTagName("ItemName")[0].childNodes[0].nodeValue;
            document.getElementById("reportAhcc_Item_ID_S").options[i]=new    Option(itemName,itemId);
        }
    }
    else
    {
        document.getElementById("reportAhcc_Item_ID_S").options[0]=new Option(itemName,itemId);
    }
}

下面的代码创建组合框

$( "#reportAhcc_Item_ID_S" ).combobox()

从我使用的列表中提取所选项目

var getItem =  $("#reportAhcc_Item_ID_S option:selected").text();

听到我正面临着问题。总是在列表中取得第一条记录。

您能否帮助我从列表中获取所选项目。

关心， Chandrasekhar的

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnUpdateItem').click(function () {
                updateItem();
            });
        });

        function updateItem() {
            var xml = '<?xml version="1.0" encoding="utf-8" ?><Items><Item><ItemId>1</ItemId><ItemName>A</ItemName></Item><Item><ItemId>2</ItemId><ItemName>B</ItemName></Item><Item><ItemId>3</ItemId><ItemName>C</ItemName></Item><Item><ItemId>4</ItemId><ItemName>D</ItemName></Item><Item><ItemId>5</ItemId><ItemName>E</ItemName></Item></Items>';

            var data = $($.parseXML(xml));
            var objSelect = $('select#reportAhcc_Item_ID_S');
            objSelect.html('');

            if (data.find('Item').length > 0) {
                data.find('Item').each(function (i) {
                    objSelect.append($('<option />', { 'value': $(this).find('ItemId').text(), 'text': $(this).find('ItemName').text() }));
                });
            }
            else {
                objSelect.append($('<option />', { 'value': 0, 'text': '--' }));
            }
        }
    </script>
</head>
<body>
    <select id="reportAhcc_Item_ID_S" style="width: 100px;">
        <option value="1">a</option>
        <option value="3">b</option>
        <option value="4">c</option>
    </select>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <input type="button" id="btnUpdateItem" value="Update Items" />
</body>
</html>

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnUpdateItem').click(function () {
                updateItem();
            });
        });

        function updateItem() {
            var xml = '<?xml version="1.0" encoding="utf-8" ?><Items><Item><ItemId>1</ItemId><ItemName>A</ItemName></Item><Item><ItemId>2</ItemId><ItemName>B</ItemName></Item><Item><ItemId>3</ItemId><ItemName>C</ItemName></Item><Item><ItemId>4</ItemId><ItemName>D</ItemName></Item><Item><ItemId>5</ItemId><ItemName>E</ItemName></Item></Items>';

            var data = $($.parseXML(xml));

            var objSelect = $('select#reportAhcc_Item_ID_S');
            var selectedValue = objSelect.val();
            objSelect.html('');

            if (data.find('Item').length > 0) {
                data.find('Item').each(function (i) {
                    objSelect.append($('<option />', { 'value': $(this).find('ItemId').text(), 'text': $(this).find('ItemName').text() }));
                });

                objSelect.val(selectedValue);
            }
            else {
                objSelect.append($('<option />', { 'value': 0, 'text': '--' }));
            }
        }
    </script>
</head>
<body>
    <select id="reportAhcc_Item_ID_S" style="width: 100px;">
        <option value="1">A</option>
        <option value="2" selected="selected">B</option>
        <option value="3">C</option>
    </select>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <input type="button" id="btnUpdateItem" value="Update Items" />
</body>
</html>

用jquery动态下拉？

2 个答案: