从另一个列表框填充列表框

时间:2014-06-17 15:52:00

标签: javascript php html ajax

我希望以列的形式提供两个列表框。左侧列表框应包含我的引用项,右侧列表框将开始为空。我希望能够双击左侧列表框中的项目,并将它们显示在右侧列表框中。

我认为这应该是一项简单的任务,我认为它已在很多地方完成,但我找不到任何如何做的例子。

1 个答案:

答案 0 :(得分:1)

你可以做到这一点并遵循逻辑

html部分。

<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>


<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>

javascript部分。

$("#select1").change(function() { 
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select2 option').clone());
    } 
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});

所以你会看到,如果你从listbox1中选择一些内容,它将改变listbox2。我希望我帮助你