Question

我需要一个select元素的选项来根据另一个元素的值进行更改。

<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循环不是。

显然，对于我的用例，我会检查是否单击了select并使用.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

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

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

Answer 2

既然你指定了jQuery，我会给你一个jQuery的答案！从所选选项中获取值和文本，然后在选择中添加一个新的：

＆＃13;

$(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
  }));
});

＆＃13;

<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>

＆＃13;

根据您对帖子的评论和更改，如果只是想要使用虚拟数组（或数组数组）替换select元素中的选项，您可以通过以下方式执行此操作有关详细信息，请参阅代码注释：

＆＃13;

// 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;
};

＆＃13;

<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>

＆＃13;

Answer 3

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

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

希望它会有所帮助

由于

KARTHIK

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

3 个答案: