Question

$('select').change(function(){
    var id = $(this).attr('id');
    if($('#' + id + ' option[value="Other"]:selected').length > 0){
        $('#' + id + '-other').prop('disabled', false);
        $('#' + id + '-other').prop('hidden', false);
    }
});

上述函数在普通选择标记上完美运行，但在具有multiple属性的标记上不起作用。我觉得我错过了他们之间的区别。

基本上，我有一个隐藏的＆amp;＆amp;禁用字段，只要用户在任何选择标记中选择“其他”选项（包括具有多个标记的选项），就需要启用并显示。

编辑：有一个隐藏的＆amp;＆amp;每个选择禁用字段

编辑2：我道歉：隐藏字段是另一种输入，它不是另一种选择。

编辑3：我刚刚制作了my fiddle。不适用于jQuery 3.2.1，但包括3.1.1在内的任何旧版本都可以正常工作。由此，我得出结论，我的原始代码中必定存在ELSE错误导致问题。我无法想象。

编辑4：真正的问题如下：

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    return false;
});

这会阻止具有多个的选择不正常。我如何修改它以保持所需的行为并在两种类型的选择上都有我的隐藏字段？小提琴链接也已更新。

Answer 1

试试这个：

$('select.first').click(function(){
 var $trg=$('#'+$(this).attr('id')+'-other');
 var state=!$('option[value="Other"]:selected',this).length;
 $trg.prop('hidden',state).prop('disabled',state);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='one' class="first" multiple="true">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="Other">Other options</option>
</select>
<input id="one-other" type="text" hidden="true" disabled="true"><br>
<select id='two' class="first" multiple="true">
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="Other">Other options</option>
</select>
<input id="two-other" type="text" hidden="true" disabled="true">

我将整个操作基于click事件，因为这会立即触发并让用户选择单击以前不可见的选项。我还简化了选择器以更改可见性和可点击性，因为它不会损害已经可见的选项再次可见。

<强> 2。修改
OP现在明确表示“其他选项”实际上是一个不同的输入元素。我相应地调整了我的答案，希望这适合......

Answer 2

您可以使用以下标记来实现此目的。

$(document).ready(function(){
  $("#selectMenu").change(function(){
			var val = $(this).val();
			if(val=="Other"){
				$("#textField1, #textField2").attr('disabled',false);
				$("#textField1, #textField2").removeClass('hidden');

			}else{
				$("#textField1, #textField2").attr('disabled',true);
				$("#textField1, #textField2").addClass('hidden');
			}
		});
});

 
.hidden{display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='selectMenu' multiple="true">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="Other">Other options</option>

</select>



<div class="form-wrap">
	<input type="text" name="" id="textField1" class="hidden" disabled>
	<input type="text" name="" id="textField2" class="hidden" disabled>

</div>

jquery函数适用于select而不是多选

2 个答案: