根据在各种选择输入中选择的选项隐藏和显示警告消息

Question

我希望显示3个产品变量的选择输入和3个警告信息，这些信息对应于它们各自的选择输入。当用户选择除第一个“虚拟”选项之外的任何选项时，警告消息应该消失。我已经实现了这一点，但我相信它不是编写JS的最佳方式，因为它基本上是重复3次。这可能是循环的还是什么？

我已经搜索了很多很多，但却找不到简单的解决方案。

HTML：

<select id="select-1">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-2">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-3">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<div>
  <p class="option-1">Choose an option 1</p>
  <p class="option-2">Choose an option 2</p>
  <p class="option-3">Choose an option 3</p>
</div>

这是JS

$( window ).load(function() {

    if($('#SingleOptionSelector-0 option').length === 1) {
      $(".option-1").hide();
    }
    if($('#SingleOptionSelector-1 option').length === 1) {
      $(".option-2").hide();
    }
    if($('#SingleOptionSelector-2 option').length === 1) {
      $(".option-3").hide();
    }

  });

  $('#SingleOptionSelector-0').on('change', function () {
    if($(this).val()===""){ 
      $(".option-1").show();
    }
    else if($(this).val()!==""){ 
      $(".option-1").hide();
    }
  });
  $('#SingleOptionSelector-1').on('change', function () {
    if($(this).val()===""){ 
      $(".option-2").show();
    }
    else {
      $(".option-2").hide();
    }
  });
  $('#SingleOptionSelector-2').on('change', function () {
    if($(this).val()===""){ 
      $(".option-3").show();
    }
    else {
      $(".option-3").hide();
    }
  });

这是一个关于codepen的工作示例：https://codepen.io/anon/pen/JVJXmw

它有效，但我想只在加载时显示消息，如果选择框有多个选项，所以我猜隐藏/显示。

我想以更好的方式写js，但没有运气

Answer 1

在这种方法中，我们设置了一个data attribute，其中包含警告p的目标。这里的值可以是任何有效的jQuery / CSS选择器，它将用于选择目标消息。

然后attribute selector用于简化事件处理程序的连接。这里data属性用作选择器。

然后，事件处理程序使用选择框中的目标数据属性，根据所选值对显示进行toggle。

最后，事件处理程序在被指定处理页面加载后是triggered。

编辑我错过了仅使用一个选项隐藏选择警告的要求。要做到这一点，each用于迭代选择，检查option标签的数量

注意我在select 3上选择了一个值来演示onload功能。

$(document).ready(function(){
  //Set up the event handler then trigger them
  //$("[id^=select-]").change(toggleWarning).trigger("change");
  //Better still lets use the data-target attribute as our selector
  $("[data-target]").on("change",toggleWarning).trigger("change");
  
  //Hide the warnings for only one child option
  $("[data-target]").each(function(){ 
    if($(this).find("option").length === 1){
      $($(this).data("target")).hide();      
    }
  });
});

function toggleWarning(){
  //Get the target warning
  var target = $($(this).data("target"));  
  //show or hide based on value  
  target.toggle($(this).val() == "");  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="select-1" data-target=".option-1">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-2" data-target=".option-2">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-3" data-target=".option-3">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3" selected>option 3</option>
</select>

<select id="whatevs" data-target=".option-4">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>
<select id="opr" data-target=".somethingRandom">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>
<select id="onlyOne" data-target=".onlyOne">
  <option value="">Only One Option</option>  
</select>

<div>
  <p class="option-1">Choose an option 1</p>
  <p class="option-2">Choose an option 2</p>
  <p class="option-3">Choose an option 3</p>
  <p class="option-4">Choose an option 4</p>
  <p class="somethingRandom">Choose an option 5</p>
  <p class="onlyOne">Only One Option</p>
</div>

Answer 2

我建议你使用像值一样的attr元素的信息，如：

$(".selector").change(function(){
  var elmTarget = $(this).attr("forelement");
  //u can do anything like that!, it just example
  $(".option-"+elmTarget).text(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='selector' forelement='1'>
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select class='selector' forelement='2'>
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select class='selector' forelement='3'>
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<div>
  <p class="option-1">Choose an option 1</p>
  <p class="option-2">Choose an option 2</p>
  <p class="option-3">Choose an option 3</p>
</div>

你可以用它来改变任何事件。