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

Question

我希望显示 3 个 select 产品变体输入和 3 个警告消息，它们对应于各自的 select 输入。当用户 select 选择第一个 'dummy' 选项以外的任何选项时，警告消息应该消失。我已经做到了这一点，但我相信这不是编写 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

它可以工作，但如果 select 框有多个选项，我只想显示加载的消息，所以我想 hide/show.

我想用更好的方式编写 js 但没有运气

Answer 1

在这种方法中，我们设置了 data attribute 和警告目标 p。这里的值可以是任何有效的 jQuery/CSS select 或者，它将被用于 select 目标消息。

然后 attribute selector 用于简化事件处理程序的连接。这里数据属性用作 selector.

事件处理程序然后使用来自 select 框的目标数据属性 toggle 基于 selected 值的显示。

最后，事件处理程序在分配给处理页面加载后 triggered 开启。

EDIT 我错过了隐藏 select 警告的要求，只有一个选项。为此 each 用于迭代 selects，检查 option 标签的数量

注意我已经 select 在 select 3 上编辑了一个值来演示加载功能。

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

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

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

Hide and show warning messages based on option selected in various select inputs

jquery

select

show-hide