根据在各种选择输入中选择的选项隐藏和显示警告消息
根据在各种选择输入中选择的选项隐藏和显示警告消息
提问于 2019-04-12 08:04:45
我希望显示产品变体的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，但是没有运气。
回答 1
Stack Overflow用户
发布于 2019-04-12 10:12:32
我建议你使用attr元素的信息，比如value和其他类似的东西：
$(".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>
你可以用它改变任何事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55642727
复制相关文章
相似问题