Question

我有两个下拉列表。这两者并不相互依存。

第一个下拉列表中的值为[ 'one', 'two', 'three', 'four' ] 第二个下拉列表中的值为[ 'ten', 'nine', 'eight', 'seven' ] 如果我在第一个下拉列表中选择two，则应使用nine自动填充第二个下拉列表。

我试过这个。

var value1=document.getElementById('ddlone').value;
if(vaue1=='two'){
    document.getElementById('ddlone').selectedValue='nine';
} else {
    document.getElementById('ddlone').selectedValue='';
}

但我没有得到预期的结果。请帮助我。

Answer 1

试试这个

HTML

<select id="first">
    <option>select</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<select id="second">
    <option>select</option>
    <option>10</option>
    <option>9</option>
    <option>8</option>
    <option>7</option>
</select>

脚本

$(document).ready(function () {
    $('#first').on('change', function () {
        var vall = $(this).find('option:selected').index()
        $('#second').find('option').eq(vall).prop('selected', true)
    });
});

DEMO

Answer 2

HTML：

<select id="sel1">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>
<select id="sel2">
    <option value="5">five</option>
    <option value="6">six</option>
    <option value="7">seven</option>
    <option value="8">eight</option>
</select>

使用Javascript：

$(function(){
    $("#sel1").on('change', function(){
        var value = $(this).val();
        if( value == '2' ){
            $("#sel2").val('7');
        }
    });
});

example

Answer 3

HTML：

<select id="first" onchange="change_second(this.value);">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    <option value="four">four</option>
</select>


<select id="second">
     <option value="ten">ten</option>
    <option value="nine">nine</option>
    <option value="eight">eight</option>
    <option value="seven">seven</option>

</select>

JS：

function change_second(val)
{
    var elmnt1 = document.getElementById('first');    
    var elmnt2 = document.getElementById('second');

    var desired_index = 0;
    for(var i=0; i < elmnt1.options.length; i++)
    {
          if(elmnt1.options[i].value === val) {
          desired_index = i;
          break;
        }
     }

    elmnt2.selectedIndex = desired_index;

}

参见 fiddle Demo

Answer 4

您必须在第一个下拉列表中添加onchange事件并调用一个函数，并且必须更改第二个下拉列表的值。

这里是代码

<html>
 <script>
 function populatedrop2(){
  var value= document.getElementById("drop1").value;
  if(value == "two"){
   document.getElementById("drop2").value = "nine";
  }
}
 </script>
 <body>
   <select id="drop1" onchange=populatedrop2();>
     <option value="one">one</option>
     <option value="two">two</option>
     <option value="three">three</option>
     <option value="four">four</option>
   </select>

   <select id="drop2">
     <option value="seven">seven</option>
     <option value="eight">eight</option>
     <option value="nine">nine</option>
     <option value="ten">ten</option>
   </select>

 </body>
</html>

最好的运气

使用javascript填充下拉列表

4 个答案: