Form Multiiselect已选择特定选项

我的表单中有多重选择，我想在多选中选择“其他”时显示一个文本框'指定其他'，或者单独选择其他选项，或者选择其他选项。Form Multiiselect已选择特定选项

这就是我想到的，只是想知道是否会有一个更快的方式没有'for'循环，以某种方式使用jQuery？

HTML

<div> 
<select size="4" id='travel' name="Travel" multiple='multiple'> 
    <option value="Air">Air</option> 
    <option value="Sea">Sea</option> 
    <option value="Train">Train</option> 
    <option value="Car">Car</option> 
    <option value="Bus">Bus</option> 
    <option value="Animal">Animal</option> 
    <option value="Walking">Walking</option> 
    <option value="Other">Other</option> 
</select> 
</div> 
<div id="otherTravel" class="clear"> 
    <p>Specifiy Other 
    <input type="text" name="otherTravel"/> 
    </p> 
</div>

jQuery的

$('#travel').change(function() { 
var $selectionArray = $(this).val(); 
for (var i = 0; i < $selectionArray.length; i++) { 
    if ($selectionArray[i] == 'Other') { 
    $('#otherTravel').removeClass('clear'); 
    } 
    else { 
    $('#otherTravel').addClass('clear'); 
    } 
}   
});

CSS

.clear { 
    display: none;

来源

2016-10-07 MattB

你是什么意思的“更快”？ – someone

代码更快。我应该指出这一点。 – MattB

您可以简单地使用indexOf，看是否阵列拥有“其他”值：

$('#travel').change(function() { 
    var selectionArray = $(this).val(); 
    if (selectionArray.indexOf("Other") > -1) { 
    $('#otherTravel').removeClass('clear'); 
    } else { 
    $('#otherTravel').addClass('clear'); 
    } 
});

来源

2016-10-07 05:18:45 Esko

这工作得很好，我比其他答案更好地理解此代码。谢谢 – MattB

可以更换循环给散热鳍片d中的“其他”选项被选择或不被：

jQuery有此一效用函数：在阵列的值

$.inArray(value, array)

返回索引。如果数组不包含值，则返回-1。

来源

2016-10-07 05:15:22

我还没有得到任何代码的工作。 – MattB

$('#travel').change(function() { 
 
    console.log($('option[value=Other]', this).is(':selected')) 
 
    $('option[value=Other]', this).is(':selected') ? $('#otherTravel').removeClass('clear') : $('#otherTravel').addClass('clear'); 
 

 

 
});

.clear { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select size="4" id='travel' name="Travel" multiple='multiple'> 
 
    <option value="Air">Air</option> 
 
    <option value="Sea">Sea</option> 
 
    <option value="Train">Train</option> 
 
    <option value="Car">Car</option> 
 
    <option value="Bus">Bus</option> 
 
    <option value="Animal">Animal</option> 
 
    <option value="Walking">Walking</option> 
 
    <option value="Other">Other</option> 
 
    </select> 
 
</div> 
 
<div id="otherTravel" class="clear"> 
 
    <p>Specifiy Other 
 
    <input type="text" name="otherTravel" /> 
 
    </p> 
 
</div>

使用ATTR选择与选择相结合基于数值添加或删除类别中选择

来源

2016-10-07 05:17:13 guradio

感谢您的解决方案。你介意说明这个意思，但： $（'option [value = Other]'，this）.is（'：selected'）？ $（'＃otherTravel'）。removeClass（'clear'）：$（'＃otherTravel'）。addClass（'clear'）; – MattB

这意味着如果选择的值为“其他”被选中，则从＃另外一个类别中删除类别清除其他类别 – guradio

我得到那部分，但特别是？在那一行中，我从来没有见过它用过。请注意，我现在只使用了jQuery几个星期。 – MattB

Form Multiiselect已选择特定选项

回答

相关问题