根据另一个 <select> 元素设置 <select> 元素

Question

我需要一个选择元素的选项根据另一个元素的值来改变。

<select id="first">
    <option value="1">one</option> // When you click this one, all the values of #second change (arbitrary number of entries)
    <option value="2">two</option> // When you click this one, all the values of #second change to something else (not necessarily the same number)
</select>
<select id="second">
    <option value="thisChanges">soDoesThis</option>
    <option value="thisToo">andThis</option>
</select>

<script>
    $("#first").on("change", function() {
        <pseudo>
            if #first == "1"
                #second = {"this", "that", "the other"}
            else if #first == "2"
                #second = {"more", "even more", "yet another", "still more"}
        </pseudo>
    }
</script>

---

这几乎就是我所追求的（我花了数年时间才弄清楚如何完全替换选择框的值），但是按钮单击事件甚至不起作用。一分钟前它还在工作，虽然 for 循环没有。

显然，对于我的用例，我会检查是否单击了选择并使用.val() 检索其值，但我认为此按钮更易于调试。

JSFiddle

HTML：

<select id="sel">
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

<button>
Click me
</button>

JS：

var list = ['11', 'Eleven', '12', 'Twelve', '13', 'Thirteen'];
$('button').on('click', function () {
        alert('click');
    var sel = $('#sel');
    alert('1');
    sel.empty();
    alert('2');
    for (i = 0, i < list.length; i+2) {
        $('#sel').append('<option value="' + list[i] + '">' + list[i+1] + '</option>');
    }
    alert('3');
});

Answer 1

如果我理解正确的话，我认为您的要求类似于级联下拉列表。

Ex jquery 代码：

$(document).ready(function () {
  $("#state").prop("disabled", true);
  $("#country").change(function () {
    if ($("#country").val() != "Please select") {
       var options = {};
       options.url = "/home/getstates";
       options.type = "POST";
       options.data = JSON.stringify({ country: $("#country").val() });
       options.dataType = "json";
       options.contentType = "application/json";
       options.success = function (states) {
       $("#state").empty();
       for (var i = 0; i < states.length; i++) {
         $("#state").append("<option>" + states[i] + "</option>");
       }
       $("#state").prop("disabled", false);
    };
    options.error = function () { alert("Error retrieving states!"); };
    $.ajax(options);
  }
  else {
    $("#state").empty();
    $("#state").prop("disabled", true);
  }
 });
});

完整代码请参考这篇好文章：

http://www.binaryintellect.net/articles/b58fde6b-415e-454d-985b-d5dc4ad2fca8.aspx

希望对你有帮助

谢谢

卡提克

Answer 2

既然你指定了 jQuery，那我就给你一个 jQuery 答案吧！从选定的选项中获取值和文本，然后将一个新的附加到选择中：

$(document).on('change', '#two', function() {
  var option_to_add = $(this).find("option:selected").text();
  var number_of_options = $('#two option').length
  $('#one').append($('<option>', {
    value: number_of_options,
    text: option_to_add
  }));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="one">
    <option value="cash">Cash</option>
    <option value="money">Money</option>
</select>
<select id="two">
    <option value="stack">Stack</option>
    <option value="overflow">Overflow</option>
    <option value="my">My</option>
    <option value="question">Question</option>
    <option value="op1">Should be option 1: <a id="option1"></a></option>
</select> Should also be option 1:
<div id="option1"></div>

根据您的 cmets 和对您帖子的更改，如果您只是想使用虚拟数组（或数组数组）替换选择元素中的选项，您可以通过以下方式进行详见代码 cmets：

// dummy data array of arrays
var list = [
  [11, "Eleven"],
  [12, "Twelve"],
  [13, "Thirteen"]
];

// click the button, replace the select contents
$('#btn').on('click', function() {

  // build an array of option objects from an array of arrays
  // see below
  var opt_array = build_opt_array(list);

  $('#sel').empty();

  // add the new options
  $(opt_array).each(function(index) {
    $('#sel').append(opt_array[index]);
  });

});

// helper function
// builds a new array of option html objects from 
// an array of arrays
function build_opt_array(items) {
  var opt_array = [];
  $(items).each(function(index) {
    var new_option = $('<option>', {
      value: items[index][0],
      text: items[index][1]
    });
    opt_array.push(new_option);
  });
  return opt_array;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel">
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

<button id="btn">
  Click me
</button>

Answer 3

要获取在第一个选择字段中找到的文本，请在所需的选择字段上使用 find(":selected") 后使用 .text() 函数。

 $("#two").focus(function() {
    document.getElementById("option1").innerHTML = $("#one").find(":selected").text();
});