Question

我试图根据选择框中的值隐藏一些复选框。我可以用一个值（playstation或xbox）来弄清楚如何做到这一点。但我不能为我的生活找出如何从下拉列表中的多个值中做到这一点。我希望它对下拉列表中的2个值执行相同的操作。

这是我到目前为止的代码：

jQuery(function($) {

  jQuery("select#field_190").change(function() {
    if (jQuery(this).val() == ["Playstation", "Xbox"]) {
      jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").hide();
    } else {
  jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").show();
    }
  });
});

修改

下拉列表的HTML：

<div class="editfield field_190 field_platform required-field visibility-
public alt field_type_selectbox">


  <label for="field_190">
    Platform <span class="bp-required-field-label">(required)</span> 
</label>


  <select id="field_190" name="field_190" aria-required="true">
    <option value="">----</option>
    <option value="PC">PC</option>
    <option value="Playstation">Playstation</option>
    <option value="Xbox">Xbox</option>
  </select>

  <p class="field-visibility-settings-notoggle" id="field-visibility-settings-toggle-190">
    This field can be seen by: <span class="current-visibility-level">Everyone</span> </p>


  <p class="description">Choose a which platform you use to play on.</p>

</div>

显示/隐藏复选框的HTML

<div id="field_11" class="input-options checkbox-options">
  <label for="field_379_0" class="option-label">
    <input type="checkbox" name="field_11[]" id="field_379_0" value="Counter 
Strike : Global Offensive">Counter Strike : Global Offensive</label>
  <label for="field_380_1" class="option-label">
    <input type="checkbox" name="field_11[]" id="field_380_1" value="Diablo 
3">Diablo 3</label>
  <label for="field_381_2" class="option-label">
    <input type="checkbox" name="field_11[]" id="field_381_2" value="League 
of Legends">League of Legends</label>
  <label for="field_382_3" class="option-label">
    <input type="checkbox" name="field_11[]" id="field_382_3" value="World 
of Warcraft">World of Warcraft</label>
  <label for="field_383_4" class="option-label">
    <input type="checkbox" name="field_11[]" id="field_383_4" 
value="Overwatch">Overwatch</label>
</div>

Answer 1

jQuery(function($) {

  jQuery("select#field_190").change(function() {
    var arr_val = ["Playstation", "Xbox"];
    if (jQuery.inArray(jQuery(this).val(), arr_val) !== -1) {
       jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").hide();
    } else {
       jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").show();
    }
  });

});

在行动中看到它

＆＃13;

jQuery(function($) {

  jQuery("select#field_190").change(function() {
    var arr_val = ["Playstation", "Xbox"];
    if (jQuery.inArray(jQuery(this).val(), arr_val) !== -1) {
       jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").hide();
    } else {
       jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").show();
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="field_190" name="field_190" aria-required="true">
  <option value="">----</option>
  <option value="PC">PC</option>
  <option value="Playstation">Playstation</option>
  <option value="Xbox">Xbox</option>
</select>

<div id="field_11" class="input-options checkbox-options">
  <label for="field_339_0" class="option-label">
    <input type="checkbox" name="field_11[]" id="field_339_0" value="Counter 
Strike : Global Offensive">Counter Strike : Global Offensive</label>
  <label for="field_340_1" class="option-label">
    <input type="checkbox" name="field_11[]" id="field_340_1" value="Diablo 
3">Diablo 3</label>
  <label for="field_341_2" class="option-label">
    <input type="checkbox" name="field_11[]" id="field_341_2" value="League 
of Legends">League of Legends</label>
  <label for="field_342_3" class="option-label">
    <input type="checkbox" name="field_11[]" id="field_342_3" value="World 
of Warcraft">World of Warcraft</label>
  <label for="field_343_4" class="option-label">
    <input type="checkbox" name="field_11[]" id="field_343_4" 
value="Overwatch">Overwatch</label>
</div>

＆＃13;

Answer 2

在您的代码中，您提供给隐藏/显示的元素在您的Html中不存在。这就是你做错了的原因。

XMLHttpRequest cannot load https://apisite.com Request header field Cache-Control is not allowed by Access-Control-Allow-Headers in preflight response.

jQuery(function($) {

  jQuery("select#field_190").change(function() {
    var arr_val = ["Playstation", "Xbox"];
    var labelFor = ["field_379_0","field_341_2","field_342_3"];
    if (jQuery.inArray(jQuery(this).val(), arr_val) !== -1) {
       jQuery("label[for='field_379_0'],label[for='field_381_2'],label[for='field_382_3']").hide();
    } else {
       jQuery("label[for='field_379_0'],label[for='field_381_2'],label[for='field_382_3']").show();
    }
  });

});

Answer 3

正如你们有些人所说，我的标签上有错误的ID，这就是我不能工作的原因。我过去8小时一直在这个网站上工作，所以我一定忽略了它： - ）

如果有人下次需要它，这就是我提出的解决方案：

jQuery(function($) {

jQuery("select#field_190").change(function() {
    var arr_val = ["Playstation", "Xbox"];
    if (jQuery.inArray(jQuery(this).val(), arr_val) !== -1) {
        jQuery("#field_379_0, #field_381_2, #field_382_3").prop({disabled: true});
    } else {
        jQuery("#field_379_0, #field_381_2, #field_382_3").prop({disabled: false});
    }
  });

});

感谢大家的帮助！

jQuery显示/隐藏下拉列表中的多个值

3 个答案: