[英]Make sure selected value is shown in first select input field
I have two select input fields as shown below. 我有两个选择输入字段,如下所示。 The second select input field gets populated using jquery when first select input field value is selected. 选择第一个选择输入字段值时,将使用jquery填充第二个选择输入字段。 The newly populated has first option set as selected by default. 新填充的第一选项默认设置为选中。
When I switch between one select option to another in first input field. 当我在第一个输入字段中的一个选择选项之间切换时。 The selected value does switch from one option value to another but the dropdown shows newly selected value and falls back to first option whereas selected="selected" is still set to new option selected. 所选值的确从一个选项值切换到另一个选项值,但下拉列表显示了新选择的值并回退到第一个选项,而selected =“ selected”仍设置为新选项。 I dont know why does the value shown in dropdown falls back to first. 我不知道为什么下拉列表中显示的值会回落到第一位。
<select id="filter_type" name="filter_type" class="selectpicker form-control" style="width:30%;">
<option value>Select Filter Type..</option>
<option value="abc">abc</option>
<option value="def">def</option>
<option value="ghi">ghi</option>
<option value="jkl">Jkl</option>
</select>
<select id="search" name="search" class="selectpicker form-control" disabled="disabled" style="width:70%;">
<option value>select filter type first</option>
</select>
$(document).ready(function()
{
$("#filter_type").change(function()
{
var id=$(this).val();
$.ajax
({
type: "GET",
url: "{{url('/users/xyz')}}",
data: {id : id},
}).done( function(data)
{
//I am clearing any appended value in second select input field
$('#search').empty();
//I am clearing any selected attribute
$('#filter_type option[selected="selected"]').removeAttr('selected');
$.each(data, function (key, data) {
console.log(data);
//If nothing is selected simply disable second select input field and submit button
if(id == '')
{
$('#search').append($('<option>', {
value: '',
text : 'select filter type first'
}));
$('#search').attr('disabled', 'disabled');
$('#submit').attr('disabled', 'disabled');
return false;
}
if(id == 'abc')
{
$('#search').append($('<option>', {
value: data.id,
text : data.abc_name
}));
$("#filter_type option:nth-child(3)").attr('selected','selected');
$("#search option:first").attr('selected','selected');
$('#search').removeAttr('disabled');
$('#submit').removeAttr('disabled');
}else if(id == 'def')
{
$('#search').append($('<option>', {
value: data.id,
text : data.def_name
}));
$("#filter_type option:nth-child(2)").attr('selected','selected');
$("#search option:first").attr('selected','selected');
$('#search').removeAttr('disabled');
$('#submit').removeAttr('disabled');
}
else if(id == 'ghi')
{
$('#search').append($('<option>', {
value: data.id,
text : data.ghi_name
}));
$("#filter_type option:nth-child(4)").attr('selected','selected');
$("#search option:first").attr('selected','selected');
$('#search').removeAttr('disabled');
$('#submit').removeAttr('disabled');
}
else if(id == 'jkl')
{
$('#search').append($('<option>', {
value: data.id,
text : data.jkl
}));
$("#filter_type option:nth-child(5)").attr('selected','selected');
$("#search option:first").attr('selected','selected');
$('#search').removeAttr('disabled');
$('#submit').removeAttr('disabled');
}
});
});
});
$(document).on('change', 'select', function () {
$('#search option[selected="selected"]').each(
function()
{
$(this).removeAttr('selected');
}
);
var value = $(this).val();
$(this).find('option[value="' + value + '"]').attr("selected", "selected");
});
Above code works just fine. 上面的代码可以正常工作。
The issue is first select input field shows first option whereas selected value is something elsed (that is the value chosen from the drop-down). 问题是首先选择输入字段显示第一个选项,而选择的值是其他值(即从下拉列表中选择的值)。 I want to show the value that is selected by user in the drop-down. 我想显示用户在下拉菜单中选择的值。
If I remove this line : 如果我删除此行:
$('#filter_type option[selected="selected"]').removeAttr('selected');
then the problem of showing right option in select box is fixed but then I have multiple selected value as I play with the dropdown. 那么,在选择框中显示正确选项的问题已修复,但是当我使用下拉菜单时,我有多个选择的值。
Initially 原来
On selecting campus 在选择校园时
On selecting year and then department one by one. 在选择年份,然后一一列出。
Actually your following statement is not removing the selected attribute 实际上,您的以下语句并未删除所选属性
$('#filter_type option[selected="selected"]').removeAttr('selected');
use the following statement instead : 请使用以下语句:
$('#filter_type').val(undefined);
Try doing select state change like this: 尝试像这样进行选择状态更改:
if(id == 'abc')
{
$('#search').append($('<option>', {
value: data.id,
text : data.abc_name
}));
$("#filter_type").val('abc');
$("#search option:first").attr('selected','selected');
$('#search').removeAttr('disabled');
$('#submit').removeAttr('disabled');
}
And so on for the others 以此类推
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.