Question

这是我的代码：

<form>
 <select name="choose">
  <option value="0">a</option>
  <option value="1">b</option>
 </select>

 <select name="choose2">
  <option value="7">x</option>
  <option value="8">y</option>
  <option value="9">z</option>
 </select>
</form>

现在我想更改select＆＃34; choose2＆＃34;的选项值。取决于点击的选项值＆＃34;选择＆＃34;例如：如果在第一个选择中选择b，则choose2中的值将更改为10,11,12和j，k，l。有人为此得到了一个很好的解决方案吗？

Answer 1

基本上你可以使用jquery;

function changer(eq, val, text) {
    $('select[name="choose2"] option:nth-child('+eq+')').val(val).text(text);
}

$('select[name="choose"]').change(function(){
    changer(1, '10', 'j');
    changer(2, '11', 'k');
    changer(3, '12', 'l');
});

https://jsfiddle.net/bqra/guwzynz1/

Answer 2

在jQuery中尝试这样的事情：

$('select#id_of_first_select').on('change',function(){

   if ($(this).val() == 'b'){
      $('select#id_of_sec_select option').each(function(i){
         $(this).val('asdf'); //use array if you want different values
         $(this).attr('value','1234');
      });
   }
});

Answer 3

$('#main').change(function(){
  var sel = $(this),
      val = sel.val(),
      second = $('#second');
  
  var options = ['opt_1_' + val, 'opt_2_' + val, 'opt_3_' + val];
  
  var html = '';
  for (var i = 0; i < options.length; i++) {
      html += '<option>' + options[i] + '</option>';
  }
  
  second.html(html);
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="main">
  <option value="1">Option1</option>
  <option value="2">Option2</option>
  <option value="3">Option3</option>
</select>

<select id="second">
  
</select>

Answer 4

为什么不放入所有选项。像这样。

<form>
 <select name="choose">
  <option value="0">a</option>
  <option value="1">b</option>
 </select>

 <select name="choose2">
  <option class="optiona" value="7">x</option>
  <option class="optiona" value="8">y</option>
  <option class="optiona" value="9">z</option>
  <option class="optionb" value="10" hidden>j</option>
  <option class="optionb" value="11" hidden>k</option>
  <option class="optionb" value="12" hidden>l</option>
 </select>
</form>



$(document).ready(function(){
$('select[name="choose"]').change(function(){
    if($(this).attr("value")=="0"){
        $(".optiona").show();
        $(".optionb").hide();

    }
    if($(this).attr("value")=="1"){
        $(".optiona").hide();
        $(".optionb").show();
    }
});
});

根据另一个选择选项值更改HTML选择选项值

4 个答案: