Question

我正在尝试使用jquery在另一个下拉列表中选择特定列表项时填充下拉列表，但由于某种原因，选项是在下拉列表之外创建的，这是我的代码，

function makeModel(obj){ 
    model = new Array();
    model[0] = new Array( '212', 'Ace', 'Aceca', 'Cobra', 'Superblower');
    model[1] = new Array( '145', '146', '147', '147 3 Door', '147 5 Door', '155', '156', '159', '164', '166', '33', '75', '90', 'Alfasud', 'Alfetta', 'Arna', 'Brera', 'GT', 'GTV', 'Giulietta', 'Gold Cloverleaf', 'Mito', 'SZ', 'Spider', 'Sprint');
    model[2] = new Array( 'Rocsta');

    var curSel=obj.options[obj.selectedIndex].value ;
    var x;

    $('#replace').html("<select name=\"test\" id=\"test\">");
    for (x in model[curSel])
    {
        $('#replace').append("<option>" + model[curSel][x] + "</option>");
    }
    $('#replace').append("</select>");  

}

HTML：

<form>
<fieldset>       
    <p>
      <label for="test">Make: </label>
      <select name="test" id="test" onchange="makeModel(this);">
        <option>Select one</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </p>
</fieldset>
</form>

<div id="replace"></div>

我确定这是我的某个逻辑错误，但我找不到它！

所以任何帮助都会受到赞赏，谢谢！

Answer 1

您要附加到替换div框，而不是选择输入元素。

更改您要添加的内容（而不是#replace，您将使用#test）然而 #test的ID用于 BOTH 选择正在插入到替换区域和用于执行插入的主要选择输入。因此，您需要将其更改为“sub”之类的内容，并最终得到类似的内容：

function makeModel(obj){
    model = new Array();
    model[0] = new Array( '212', 'Ace', 'Aceca', 'Cobra', 'Superblower');
    model[1] = new Array( '145', '146', '147', '147 3 Door', '147 5 Door', '155', '156', '159', '164', '166', '33', '75', '90', 'Alfasud', 'Alfetta', 'Arna', 'Brera', 'GT', 'GTV', 'Giulietta', 'Gold Cloverleaf', 'Mito', 'SZ', 'Spider', 'Sprint');
    model[2] = new Array( 'Rocsta');

    var curSel=obj.options[obj.selectedIndex].value ;
    var x;

    $('#replace').html("<select name=\"test\" id=\"sub\">");
    for (x in model[curSel])
    {
        $('#sub').append("<option>" + model[curSel][x] + "</option>");
    }   

}

这样就可以了。 See here.

Answer 2

$('#replace').append("</select>");

没有必要。实际上会创建另一个选择元素或只是错误。

在你的问题中，你将选项附加到div，而不是实际选择。我会像这样解决它。

function makeModel(obj){
    model = new Array();
    model[0] = new Array( '212', 'Ace', 'Aceca', 'Cobra', 'Superblower');
    model[1] = new Array( '145', '146', '147', '147 3 Door', '147 5 Door', '155', '156', '159', '164', '166', '33', '75', '90', 'Alfasud', 'Alfetta', 'Arna', 'Brera', 'GT', 'GTV', 'Giulietta', 'Gold Cloverleaf', 'Mito', 'SZ', 'Spider', 'Sprint');
    model[2] = new Array( 'Rocsta');

    var curSel=obj.options[obj.selectedIndex].value ;
    var x;

    var $replace = $('#replace');
    var $sel = $('<select name="test" id="sub">').appendTo($replace);
    $.each(model[curSel], function(i,v){
    {
        var $option = $("<option>" + v + "</option>");
        $sel.append($option);
    })
}

使用jQuery通常更好，而不是for in，就像原型已经扩展一样，你可以获得很多你不会想到的垃圾！

使用jQuery向下拉列表添加选项时出现问题

2 个答案: