禁用已被另一个选择选择的选项(动态添加选择框) [英] Disable option that already selected by another select (add select box dynamically)

查看：25
本文介绍了禁用已被另一个选择选择的选项(动态添加选择框)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在禁用已在另一个选择中选择的选项时遇到问题.选择框可以动态添加，无限制.我已经尝试使用下面的脚本，但效果不佳.

我有一个表格 &像这样的脚本

var counteritem = 2;var usedOptions = [];函数 updateCounterItem(isRemove){如果 (isRemove){counteritem = counteritem - 1;} 别的{counteritem = counteritem + 1;}如果(反项目 > 1){$("button#remove").prop("disabled", false);} 别的{$("button#remove").prop("disabled", true);}}$(document).ready(function(){更新计数器项目(真)；无功计数器 = 1;$('button#add').on('click', function(e){e.preventDefault();$('div.featured-item').last().clone().appendTo('div#featured-items');计数器 = 计数器 + 1；$('.featured-item label').last().replaceWith('<label>Featured #' + counter + '</label>');$('.featured-item select').last().attr('id', 'featured' + counter);更新计数器项目(假)；$('.featured-item select').find('option').prop('disabled', false);for (key in usedOptions){值 = usedOptions[key];$('.featured-item select').find('option[value="' + value + '"]').prop('disabled', true);}console.log(usedOptions);});$('button#remove').on('click', function(e){e.preventDefault();console.log(usedOptions);$('div.featured-item').last().remove();计数器 = 计数器 - 1;更新计数器项目(真)；});$(document).on('click', 'select', function(){$(this).find('option[value="' + $(this).val() + '"]').prop('disabled', false);});$(document).on('change', 'select', function(){var thisVal = $(this).val();usedOptions = [];$('option').prop('disabled', false);$('选择').each(function(){var 值 = $(this).val();usedOptions[$(this).attr('id')] = value;});变量值 = '';for (key in usedOptions){值 = usedOptions[key];$('option[value="' + value + '"]').prop('disabled', true);$('#' + key + ' option[value=' + value + ']').prop('disabled', false);}$(this).find('option[value="' + thisVal + '"]').prop('disabled', false);console.log(usedOptions);});});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="box-body"><button id="add" class="btn btn-primary"><i class="fa fa-plus-circle"></i>添加项目<button id="remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i>删除最后一项<小时><div id="特色项目"><div class="featured-item form-group"><label>精选#1</label><select id="featured1" name="sort[]" class="form-control features"><option disabled selected>选择一个</option><option class="item" value="1">Andy</option><option class="item" value="2">Boss</option><option class="item" value="3">Cindy</option><option class="item" value="4">Drek</option></选择>

解决方案

你的代码逻辑有点歪，这应该适合你

var new_id;var selected_val_arrray = [];//添加$(document).on('click', "#add", function() {var el = $(".featured-item").last()var clone_holder = el.clone(true);var current_items_count = $(".featured-item").lengthnew_id = current_items_count + 1;var select_els = $(".featured_select")select_els.each(function() {var curr_select_el = $(this);var curr_select_el_val = curr_select_el.val();selected_val_arrray.push(curr_select_el_val)})$("#featured-items").append(clone_holder);var new_last_featured = $(".featured-item").last()new_last_featured.children('label').text('Featured #' + new_id);new_last_featured.children('select').attr('id', 'featured' + new_id)var selected_val_arrray_length = selected_val_arrray.lengthfor (var i = 0; i < selected_val_arrray_length; i++) {var select_els = $(".featured_select");select_els.each(function() {var curr_select_el = $(this);var curr_select_el_val = curr_select_el.val()如果(selected_val_arrray[i] != curr_select_el_val){curr_select_el.find('option[value="' + selected_val_arrray[i] + '"]').prop('disabled', true);}})}})//用于禁用$(document).on('change', ".featured_select", function() {var el = $(this);var el_id = el.attr('id');var el_value = el.val();var select_els = $(".featured_select");select_els.each(function() {var curr_select_el = $(this);var curr_select_el_id = curr_select_el.attr('id');如果(curr_select_el_id ！= el_id){console.log("dd");curr_select_el.find('option[value="' + el_value + '"]').prop('disabled', true);}})})//移除$(document).on('click', "#remove", function() {var el = $(".featured-item").last()var el_select = el.children('select');var el_select_val = el_select.val();控制台日志(el_select_val)；var select_els = $(".featured_select")select_els.each(function() {var curr_select_el = $(this);curr_select_el.find('option[value="' + el_select_val + '"]').prop('disabled',false);})if ($(".featured-item").length != 1) {el.remove()}})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div class="box-body"><button id="add" class="btn btn-primary"><i class="fa fa-plus-circle"></i>添加项目<button id="remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i>删除最后一项<小时><div id="特色项目"><div class="featured-item form-group"><label>精选#1</label><select id="featured1" class="featured_select" name="sort[]" class="form-control features"><option disabled selected>选择一个</option><option class="item" value="Andy">Andy</option><option class="item" value="Cindy">Cindy</option><option class="item" value="Drek">Drek</option></选择>

I have a problem to disable option that already selected in another select. Select box can be added dynamically, unlimited. I've tried with my script below but its not work well.

I have a form & script like this

var counteritem = 2;
var usedOptions = [];
function updateCounterItem(isRemove)
{
	if (isRemove)
	{
		counteritem = counteritem - 1;
	} else
	{
		counteritem = counteritem + 1;
	}

	if (counteritem > 1)
	{
		$("button#remove").prop("disabled", false);
	} else
	{
		$("button#remove").prop("disabled", true);
	}
}
$(document).ready(function()
	{
		updateCounterItem(true);
		var counter = 1;
		$('button#add').on('click', function(e)
			{
				e.preventDefault();
				$('div.featured-item').last().clone().appendTo('div#featured-items');
				counter = counter + 1;
				$('.featured-item label').last().replaceWith('<label>Featured #' + counter + '</label>');
				$('.featured-item select').last().attr('id', 'featured' + counter);
				updateCounterItem(false);

				$('.featured-item select').find('option').prop('disabled', false);
				for (key in usedOptions)
				{
					value = usedOptions[key];
					$('.featured-item select').find('option[value="' + value + '"]').prop('disabled', true);
				}
				console.log(usedOptions);
			});
		$('button#remove').on('click', function(e)
			{
				e.preventDefault();
				console.log(usedOptions);
				$('div.featured-item').last().remove();
				counter = counter - 1;
				updateCounterItem(true);
			});
		$(document).on('click', 'select', function()
			{
				$(this).find('option[value="' + $(this).val() + '"]').prop('disabled', false);
			});
		$(document).on('change', 'select', function()
			{
				var thisVal = $(this).val();
				usedOptions = [];
				$('option').prop('disabled', false);
				$('select').each(function()
					{
						var value = $(this).val();
						usedOptions[$(this).attr('id')] = value;
					});
				var value = '';
				for (key in usedOptions)
				{
					value = usedOptions[key];
					$('option[value="' + value + '"]').prop('disabled', true);
					$('#' + key + ' option[value=' + value + ']').prop('disabled', false);
				}
				$(this).find('option[value="' + thisVal + '"]').prop('disabled', false);
				console.log(usedOptions);
			});
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
    <button id="add" class="btn btn-primary"><i class="fa fa-plus-circle"></i> Add item</button>
    <button id="remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i> Remove last item
    </button>
    <hr>
    <div id="featured-items">
        <div class="featured-item form-group">
            <label>Featured #1</label>
            <select id="featured1" name="sort[]" class="form-control featured">
                <option disabled selected>Select one</option>
                <option class="item" value="1">Andy</option>
                <option class="item" value="2">Boss</option>
                <option class="item" value="3">Cindy</option>
                <option class="item" value="4">Drek</option>
            </select>
        </div>
    </div>
</div>

解决方案

your code logic was a bit askew , this should work out for you

var new_id;
var selected_val_arrray = [];
//adding
$(document).on('click', "#add", function() {
  var el = $(".featured-item").last()
  var clone_holder = el.clone(true);

  var current_items_count = $(".featured-item").length
  new_id = current_items_count + 1;

  var select_els = $(".featured_select")
  select_els.each(function() {
    var curr_select_el = $(this);
    var curr_select_el_val = curr_select_el.val();
    selected_val_arrray.push(curr_select_el_val)
  })

  $("#featured-items").append(clone_holder);

  var new_last_featured = $(".featured-item").last()
  new_last_featured.children('label').text('Featured #' + new_id);
  new_last_featured.children('select').attr('id', 'featured' + new_id)

  var selected_val_arrray_length = selected_val_arrray.length
  for (var i = 0; i < selected_val_arrray_length; i++) {
    var select_els = $(".featured_select");
    select_els.each(function() {
      var curr_select_el = $(this);
      var curr_select_el_val = curr_select_el.val()
      
      if(selected_val_arrray[i] != curr_select_el_val)
        {
        curr_select_el.find('option[value="' + selected_val_arrray[i] + '"]').prop('disabled', true);
          }
    })
  }

})

//for disabling
$(document).on('change', ".featured_select", function() {
  var el = $(this);
  var el_id = el.attr('id');

  var el_value = el.val();

  var select_els = $(".featured_select");
  select_els.each(function() {
    var curr_select_el = $(this);
    var curr_select_el_id = curr_select_el.attr('id');
    if (curr_select_el_id != el_id) {
      console.log("dd");
      curr_select_el.find('option[value="' + el_value + '"]').prop('disabled', true);
    }
  })
})

//removing
$(document).on('click', "#remove", function() {
  var el = $(".featured-item").last()
  var el_select = el.children('select');
  var el_select_val = el_select.val();

  console.log(el_select_val);
  var select_els = $(".featured_select")
  select_els.each(function() {
    var curr_select_el = $(this);
    curr_select_el.find('option[value="' + el_select_val + '"]').prop('disabled',false);
  })

  if ($(".featured-item").length != 1) {
    el.remove()
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box-body">
  <button id="add" class="btn btn-primary"><i class="fa fa-plus-circle"></i> Add item</button>
  <button id="remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i> Remove last item
  </button>
  <hr>
  <div id="featured-items">
    <div class="featured-item form-group">
      <label>Featured #1</label>
      <select id="featured1" class="featured_select" name="sort[]" class="form-control featured">
        <option disabled selected>Select one</option>
        <option class="item" value="Andy">Andy</option>
        <option class="item" value="Boss">Boss</option>
        <option class="item" value="Cindy">Cindy</option>
        <option class="item" value="Drek">Drek</option>
      </select>
    </div>
  </div>
</div>

这篇关于禁用已被另一个选择选择的选项(动态添加选择框)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆