Javascript 选择框,基于数组中的值禁用值
我有一个选择菜单,它为用户提供了一些条件选项,可以用来作为搜索的过滤器,用户可以添加任意多的过滤器,但此时用户可以多次添加相同的过滤器 我想做的是,当用户从选择框中选择一个过滤器时,值被添加到数组中,然后选择框中的选项被禁用,javascript和jquery可以这样做吗 目前我有以下几点 创建新过滤器选择菜单的代码Javascript 选择框,基于数组中的值禁用值,javascript,jquery,html,arrays,Javascript,Jquery,Html,Arrays,我有一个选择菜单,它为用户提供了一些条件选项,可以用来作为搜索的过滤器,用户可以添加任意多的过滤器,但此时用户可以多次添加相同的过滤器 我想做的是,当用户从选择框中选择一个过滤器时,值被添加到数组中,然后选择框中的选项被禁用,javascript和jquery可以这样做吗 目前我有以下几点 创建新过滤器选择菜单的代码 $('select.option').live({ change: function() { if($(this).val() == 'distance') {
$('select.option').live({
change: function() {
if($(this).val() == 'distance')
{
var element = $(this);
$.ajax({
url: site_url + 'ajax/row/distance',
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
else if($(this).val() == 'height')
{
var element = $(this);
$.ajax({
url: site_url + 'ajax/row/height',
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
else if($(this).val() == 'appearance')
{
var element = $(this);
$.ajax({
url: site_url + 'ajax/row/appearance',
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
else if($(this).val() == 'education')
{
var element = $(this);
$.ajax({
url: site_url + 'ajax/row/education',
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
else if($(this).val() == 'children')
{
var element = $(this);
$.ajax({
url: site_url + 'ajax/row/children',
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
else if($(this).val() == 'smoking')
{
var element = $(this);
$.ajax({
url: site_url + 'ajax/row/smoking',
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
else if($(this).val() == 'drinking')
{
var element = $(this);
$.ajax({
url: site_url + 'ajax/row/drinking',
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
else if($(this).val() == 'politics')
{
var element = $(this);
$.ajax({
url: site_url + 'ajax/row/politics',
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
else if($(this).val() == 'religion')
{
var element = $(this);
$.ajax({
url: site_url + 'ajax/row/religion',
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
else if($(this).val() == 'ethnicity')
{
var element = $(this);
$.ajax({
url: site_url + 'ajax/row/ethnicity',
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
else if($(this).val() == 'work')
{
var element = $(this);
$.ajax({
url: site_url + 'ajax/row/work',
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
}
});
由于
url
的名称和所选选项相同,您可以尝试以下操作:
$('select.option').on({
change: function() {
var element = $(this).val();
$(this).prop('disabled', true);
$.ajax({
url: site_url + 'ajax/row/' + element,
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
})
我不知道您的HTML是什么样子,但我会让它大致如下:
<select class="option">
<option value="distance" data-path="ajax/row/distance">Distance</option>
<option value="height" data-path="ajax/row/height">Height</option>
...
</select>
var selected=$(this.data('selected')| |[]是什么;是吗$(此)。数据(“选定”);正在返回未定义的。@sico87:第一次通过$(this)。数据('selected')将未定义,因此
selected
变量将被设置为空数组([]
)-第二次不会,因此它将返回以前选择的选项的保存数组。
$('select.option').live({
change: function() {
// get selected history or empty array
var selected = $(this).data('selected') || [];
// get selected option
var $element = $(this).find('option:selected');
// if selected option in history, return
if($.inArray($element.val(), selected) return;
// otherwise, add to history and save back into element
selected.push($element.val());
$(this).data('selected', selected);
// query AJAX by using the data- attribute of the option
$.ajax({
url: site_url + $element.data('path'),
success: function(data) {
element.parent().next('td.fillin').html(data);
}
});
}
});