如何正确使用 JQuery 选项选择

Question

我正在学习 JQuery，需要一些有关更改功能的帮助。通过将值附加到单词 example 上，此示例可以正常工作。

var val = $('#exampleFruit').val();
$('#example'+val).show();

工作 - https://jsfiddle.net/wj_fiddle_playground/mt69f5w4/19/

但是，现在我正在尝试将 optionValue 变量与这样的 value 属性一起使用。

$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");

不工作 - https://jsfiddle.net/wj_fiddle_playground/tavg9ec7/11/

如果选择<option value="1">Apple</option>，苹果下拉菜单应该显示..等等。

更新

如果苹果列表为<select id="option2Apple">，选项值为
<option value="1">Apple</option>

如何从苹果中选择表格第 3 行？

小提琴：https://jsfiddle.net/wj_fiddle_playground/tavg9ec7/18/

<table>
  <tr id="table 1">
   <select id="exampleFruit">
  <option value="">-- Please Select --</option>
  <option value="1">Apple</option>
  <option value="2">Banana</option>
</select>
</tr>

  <tr id="table 2">
  <select id="option1Banana" class="exampleSubselect" style="display: none;">
  <option value="1">Plantain</option>
  <option value="2">Burro</option>
  <option value="3">Cavendish</option>
  </select>
</tr>

  <tr id="table 3">
   <select id="option2Apple" class="exampleSubselect" style="display: none;">
 <option value="1">Red Delicious</option>
  <option value="2">Granny Smith</option>
  <option value="3">Cox's Orange Pippin</option>
</select>

Answer 1

您忘记了“#”，这是用于在 jQuery 中获取 id 的。尝试修改这个：

<select id="exampleFruit">
    <option value="">-- Please Select --</option>
    <option value="exampleApple">Apple</option>
    <option value="exampleBanana">Banana</option>
    <option value="exampleOrange">Orange</option>
</select>

和

$(document).ready(function(){
    $("#exampleFruit").change(function(){
      var optionValue = $(this).val();
      $('.exampleSubselect').hide();
      if(optionValue){
        $(`#${optionValue}`).show();
      }
    }).change();
});

Answer 2

类似的东西：

$("#exampleFruit option").each(function() {
  var optionValue = $(this).val();
});

Answer 3

您的代码中存在一些问题。首先$('exampleFruit') 缺少前面的# id 选择器。此外，选项元素的值是1、2 和3，但您似乎需要将水果名称作为字符串。在这种情况下，您需要使用text()，而不是val()。最后，一次只能选择 1 个option，因此不需要each() 循环。

此外，从逻辑上讲，您希望在更改之前隐藏之前选择的水果选项。为此，您可以使用hide()。

说了这么多，试试这个：

$(document).ready(function() {
  $("#exampleFruit").change(function() {
    let optionValue = $(this).find("option:selected").text();
    $('.exampleSubselect').val('1').hide();
    $('#example' + optionValue).show();
  }).change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr id="table 1">
    <select id="exampleFruit">
      <option value="">-- Please Select --</option>
      <option value="1">Apple</option>
      <option value="2">Banana</option>
      <option value="3">Orange</option>
    </select>
  </tr>

  <tr id="table 2">
    <select id="exampleApple" class="exampleSubselect" style="display: none;">
      <option value="1">Red Delicious</option>
      <option value="2">Granny Smith</option>
      <option value="3">Cox's Orange Pippin</option>
    </select>
  </tr>
  <tr id="table 3">
    <select id="exampleBanana" class="exampleSubselect" style="display: none;">
      <option value="1">Plantain</option>
      <option value="2">Burro</option>
      <option value="3">Cavendish</option>
    </select>
  </tr>
  <tr id="table 4">
    <select id="exampleOrange" class="exampleSubselect" style="display: none;">
      <option value="1">Blood</option>
      <option value="2">Navel</option>
      <option value="3">>Valencia</option>
    </select>
  </tr>
</table>