-2

これらの選択オプションは、wordpress バックエンドと次の div タグを介して変更されます。

私が必要とするのは、対応する div タグが、選択ボックスがその選択肢にあるときにのみ表示されるようにすることです。

コードの例:

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

したがって、基本的には、どの番号の子が選択されているかを jquery で認識し、li ID「show-these」で同じ番号の子を表示できるようにしたいと考えています。

4

2 に答える 2

1

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

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

フィドルをチェック

于 2012-12-03T15:59:57.260 に答える
-1

これが役立つと思います：

<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>
于 2012-12-03T16:08:08.113 に答える