如果我 select 通过 jQuery 将真值分配给其他 select 选项
If I selected true value assign to other select option via jQuery
如果主题混淆,我很抱歉。
我的网站上有两个 select。它使用 select2 插件。
第一个 select :
<select name="" id="">
<option value="one"></option>
<option value="two"></option>
<option value="three"></option>
<option value="four"></option>
<option value="five"></option>
</select>
还有一个:
<select name="" id="">
<option value="other_one"></option>
<option value="other_two"></option>
<option value="other_three"></option>
<option value="other_four"></option>
<option value="other_five"></option>
</select>
有他们的逻辑。如果选中值 one
,则该值必须是 other_one
,其他 select(并且其他选项应被禁用)。同样,其他 select 选项也适用于这种情况。
我研究 https://select2.github.io/options.html#adapters 和 Whosebug,是的,我可以将触发器添加到 selects,例如打印 html 或文本,但我需要不同的触发器。
我该怎么做?
您必须添加更改事件并更改第二个 select #select2
的值,具体取决于 select 从第一个 select #select1
编辑的值。
希望对您有所帮助。
$("#select1, #select2").select2();
$("#select1").on('change',function()
{
$('#select2 option').removeAttr('disabled');
var selected_1_value = $(this).val();
$("#select2").val('other_'+selected_1_value).change();
$("#select2 option:not(:selected)").attr('disabled', 'disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<select name="" id="select1">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
<select name="" id="select2">
<option value="other_one">other 1</option>
<option value="other_two">other 2</option>
<option value="other_three">other 3</option>
<option value="other_four">other 4</option>
<option value="other_five">other 5</option>
</select>
<select name="" id="select1">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
<option value="five">five</option>
<select name="" id="select2">
<option value="other_one">other_one</option>
<option value="other_two">other_two</option>
<option value="other_three">other_three</option>
<option value="other_four">other_four</option>
<option value="other_five">other_five</option>
</select>
$('select').select2();
$("#select1").change(function()
{
$('#select2 option').prop("disabled",false); // remove disabled on all options - basically do a reset
$('#select2 option:selected').prop("disabled",true); // disable the current selected option
$('#select2').select2().select2('val', "other_" + $(this).val()); // set the value of #select2 by concatenating the value from #select1
$('#select2 option:not(:selected)').prop("disabled",true); // disable all other non-selected options
});
如果主题混淆,我很抱歉。
我的网站上有两个 select。它使用 select2 插件。
第一个 select :
<select name="" id="">
<option value="one"></option>
<option value="two"></option>
<option value="three"></option>
<option value="four"></option>
<option value="five"></option>
</select>
还有一个:
<select name="" id="">
<option value="other_one"></option>
<option value="other_two"></option>
<option value="other_three"></option>
<option value="other_four"></option>
<option value="other_five"></option>
</select>
有他们的逻辑。如果选中值 one
,则该值必须是 other_one
,其他 select(并且其他选项应被禁用)。同样,其他 select 选项也适用于这种情况。
我研究 https://select2.github.io/options.html#adapters 和 Whosebug,是的,我可以将触发器添加到 selects,例如打印 html 或文本,但我需要不同的触发器。
我该怎么做?
您必须添加更改事件并更改第二个 select #select2
的值,具体取决于 select 从第一个 select #select1
编辑的值。
希望对您有所帮助。
$("#select1, #select2").select2();
$("#select1").on('change',function()
{
$('#select2 option').removeAttr('disabled');
var selected_1_value = $(this).val();
$("#select2").val('other_'+selected_1_value).change();
$("#select2 option:not(:selected)").attr('disabled', 'disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<select name="" id="select1">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
<select name="" id="select2">
<option value="other_one">other 1</option>
<option value="other_two">other 2</option>
<option value="other_three">other 3</option>
<option value="other_four">other 4</option>
<option value="other_five">other 5</option>
</select>
<select name="" id="select1">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
<option value="five">five</option>
<select name="" id="select2">
<option value="other_one">other_one</option>
<option value="other_two">other_two</option>
<option value="other_three">other_three</option>
<option value="other_four">other_four</option>
<option value="other_five">other_five</option>
</select>
$('select').select2();
$("#select1").change(function()
{
$('#select2 option').prop("disabled",false); // remove disabled on all options - basically do a reset
$('#select2 option:selected').prop("disabled",true); // disable the current selected option
$('#select2').select2().select2('val', "other_" + $(this).val()); // set the value of #select2 by concatenating the value from #select1
$('#select2 option:not(:selected)').prop("disabled",true); // disable all other non-selected options
});