如何正确使用JQuery选项选择

Question

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

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>

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

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

类似的东西：

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

Answer 2

您的代码中存在一些问题。首先 $('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>

Answer 3

您忘记了“#”，这是用于获取 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();
});

如何正确使用JQuery选项选择

How to properly use JQuery Option Selection

html

javascript

jquery

jquery-ui