Javascript Jquery下拉列表取消选择其他附近的下拉列表
我在同一页上有多个select元素被UL替换,因此可以对它们进行样式设置 我有一个问题,虽然在一个下拉选项上选择一个下拉菜单在页面上取消选择另一个下拉菜单一起。对于受影响的下拉列表,我似乎正确地保留了ulli上的“selected”类,但在实际的select option元素上,它去掉了selected属性 我想不出来。有什么想法吗Javascript Jquery下拉列表取消选择其他附近的下拉列表,javascript,jquery,select,drop-down-menu,html-select,Javascript,Jquery,Select,Drop Down Menu,Html Select,我在同一页上有多个select元素被UL替换,因此可以对它们进行样式设置 我有一个问题,虽然在一个下拉选项上选择一个下拉菜单在页面上取消选择另一个下拉菜单一起。对于受影响的下拉列表,我似乎正确地保留了ulli上的“selected”类,但在实际的select option元素上,它去掉了selected属性 我想不出来。有什么想法吗 $('.dropdown-select').each(function(i, select) { if (!$(this).next().hasClas
$('.dropdown-select').each(function(i, select) {
if (!$(this).next().hasClass('dropdown')) {
$(this).after('<div class="dropdown ' + ($(this).attr('class') || '') + '" tabindex="0"><span class="current ' + ($(this).attr('id') || '') + '"></span><div class="list ' + ($(this).attr('id') || '') + '"><ul class="' + ($(this).attr('id') || '') + '"></ul></div></div>');
var dropdown = $(this).next();
var options = $(select).find('option');
var selected = $(this).find('option:selected');
dropdown.find('.current ' + ($(i).attr('id') || '') + '').html(selected.data('display-text') || selected.text());
options.each(function(j, o) {
var display = $(o).data('display-text') || '';
dropdown.find('ul.' + ($(select).attr('id') || '')).append('<li class="option' + ($(o).is(':selected') ? ' selected' : '') + '" data-value="' + $(o).val() + '" data-display-text="' + display + '">' + $(o).text() + '</li>');
});
}
});
}
$('.dropdown select')。每个(函数(i,select){
if(!$(this.next().hasClass('dropdown')){
$(this).after(“
);
var dropdown=$(this.next();
var options=$(选择).find('option');
var selected=$(this.find('option:selected');
下拉菜单.find('.current'+($(i).attr('id')| |''')+'').html(selected.data('display-text')| | selected.text());
选项。每个(功能(j,o){
var display=$(o).data('display-text')| |';
dropdown.find('ul.+($(select).attr('id')| |“”).append('li class=“option”+($(o).is(':selected')?'selected':'')+'“数据值=“”+$(o).val()+”“数据显示文本=“'+display+'”>”+$(o).text()+”);
});
}
});
}
时区
你好
再见
时间格式
汽车
船
通货
美元
可以
主题
光
黑暗的
同时显示html代码
<div class="form_item_row">
<div class="form_item_cell half">
<label for="time_zone">Time Zone</label>
<select name="time_zone" id="time_zone" tabindex="4" class="dropdown-select time_zone">
<option value="hello" data-display-text="hello" data-value="hello">hello</option>
<option value="goodbye" data-display-text="goodbye" data-value="goodbye">goodbye</option>
</select>
</div>
<div class="form_item_cell half">
<label for="time_format">Time Format</label>
<select name="time_format" id="time_format" tabindex="5" class="dropdown-select time_format">
<option value="car" data-display-text="car" data-value="car">car</option>
<option value="boat" data-display-text="boat" data-value="boat">boat</option>
</select>
</div>
</div>
<div class="form_item_row">
<div class="form_item_cell half_single">
<label for="user_currency">Currency</label>
<select name="user_currency" id="user_currency" tabindex="6" class="dropdown-select user_currency">
<option value="usd" data-display-text="usd" data-value="usd">usd</option>
<option value="can" data-display-text="can" data-value="can">can</option>
</select>
</div>
</div>
<div class="form_item_row">
<div class="form_item_cell half_single">
<label for="theme">Theme</label>
<select name="theme" id="theme" tabindex="7" class="dropdown-select theme">
<option value="1" data-display-text="light" data-value="light">light</option>
<option value="2" data-display-text="dark" data-value="dark">dark</option>
</select>
</div>
</div>