[英]Show/Hide div based on select value using a child ref with dynamically updated choices using jquery
These select options are changed via a wordpress backend, as well as the following div tags.这些选择选项通过 wordpress 后端以及以下 div 标签进行更改。
What I need is for the corresponding div tag to show only when the select box is on that choice by what number child it is.我需要的是相应的 div 标签仅在选择框位于该选择上时才显示它是哪个数字子项。
Example of code:代码示例:
<form>
<select class="select" name="SELECT_Mood_30">
<option value="0"></option>
<option value="hap">Happy</option>
<option value="sad">Sadness</option>
<option value="ang">Angry</option>
<option value="gru">Grumpy</option>
</select>
</form>
<ul id="show-these">
<li></li>
<li>Happy huh?</li>
<li>Why so sad?</li>
<li>Everything will be ok!</li>
<li>Cheer up!</li>
</ul>
So basically I would like jquery to be able to know which number child is selected and show the same number child in the li ID "show-these".所以基本上我希望jquery能够知道选择了哪个数字孩子并在li ID“show-these”中显示相同的数字孩子。
JS JS
var $ul = $('#show-these');
$ul.find('li').hide();
$('.select').on('change', function(){
var index = $(this).find('option:selected').index();
var $ul = $('#show-these');
$ul.find('li').hide();
$ul.find('li').eq(index).show();
});
HTML HTML
<div id="show-these">
<li></li>
<li>Happy huh?</li>
<li>Why so sad?</li>
<li>Everything will be ok!</li>
<li>Cheer up!</li>
</div>
Guess this helps:猜猜这有帮助:
<select class="select" onchange="update(this.value)" name="SELECT_Mood_30">
<option value="0"></option>
<option value="hap">Happy</option>
<option value="sad">Sadness</option>
<option value="ang">Angry</option>
<option value="gru">Grumpy</option>
</select>
<div id="show-these">
<li></li>
<li>Happy huh?</li>
<li>Why so sad?</li>
<li>Everything will be ok!</li>
<li>Cheer up!</li>
</div>
<script type="text/javascript">
function update(value){
var option = $('.select').find('option[value="'+value+'"]');
var index = $('.select').children().index(option);
$('#show-these').children().hide();
$($('#show-these').children()[index]).show();
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.