Question

我有一个多选项，我想用它来挑选哪些元素出现在HTML模板窗口中。所以我想要迭代几个选项，并根据它是否被选中，使预览元素可见或隐藏。我想要这样的事情：

$('#area_select option').each(function(i){
            if($(this).is(':selected')){var $css = {'visibility' : 'visible'}}
            else{var $css = {'visibility' : 'hidden'}}
            $(??????).css($css);            
        });

正如你所看到的，我只是在我的area_select菜单中迭代每个选项（我很确定语法有效），但我不知道如何将css应用到相应的部分.. ..如何通过我的选项引用我的预览元素？

Answer 1

更简单的方法是在多重选择上调用.val()。这将返回一系列您可以迭代的选定值。

var array = $('#area_select').val()
$.each(array, function(i,val) {
    // your code
});

因此，就显示元素而言，它将取决于选择选项的值中存储的数据类型。

对于ID，请执行以下操作：

$(selectorForCollection).css('visibility','hidden');

var array = $('#area_select').val();

$.each(array, function(i,value) {
    $('#' + value).css('visibility','visible');
});

或者如果它们是类名，请执行以下操作：

$(selectorForCollection).css('visibility','hidden');

var array = $('#area_select').val();

$.each(array, function(i,value) {
    $('.' + value).css('visibility','visible');
});

Answer 2

为每个选项指定一个与正确部分的ID相对应的名称。

e.g。

<select>
  <option value="whatever">Whatever</option>
  <option value="whatever2">Whatever 2</option>
</select>

然后每个元素都将包含在这样的div中：

 <div id="whatever-preview">
 <!-- Whatever -->
 </div>

然后你的Javascript

$('#area_select option').each(function(i){
        if($(this).is(':selected')){var $css = {'visibility' : 'visible'}}
        else{var $css = {'visibility' : 'hidden'}}
        var div_name = "#" + $(this).attr('value') + "-preview";
        $(div_name).css($css);            
});

Answer 3

为每个选项提供一个id，引用预览窗口中相应元素的id。

例如：

 <option id="option-1">This turns on the first option element in the preview window</option>
 <option id="option-2">This turns on the first option element in the preview window</option>

并为预览窗口元素提供类似结尾的ID：

 <div id='window-1'>corresponding window preview element</div>

然后在javascript：

 $("#window-" + $(this).attr('id').split('-')[1]).css($css);

Answer 4

首先，让元素隐藏或显示相同的类，但id匹配选项值：

<div class="something" id="val_1">content1</div>
<div class="something" id="val_2">content2</div>
<div class="something" id="val_3">content3</div>
<div class="something" id="val_4">content4</div>

<select id="area_select">
    <option value="val_1">val 1</option>
    <option value="val_2">val 1</option>
    <option value="val_3">val 1</option>
    <option value="val_4">val 1</option>
</select>

然后，当选择选择选项更改时隐藏所有内容并显示所选

$('#area_select').change( function(){
    var val = $(this).val();
    $('.something').hide();
    $('#'+val).show();
    return false;
});

Jquery / Javascript将$（this）链接到不同div中的元素？

4 个答案: