Jquery Dynami c Опции скрыть / показать в окне выбора - PullRequest
Новая
       35

Jquery Dynami c Опции скрыть / показать в окне выбора

0 голосов
/ 26 апреля 2020

У меня следующий простой Html код с SELECT с одинаковыми формами классов с одинаковыми значениями параметров 

<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

Я просто хочу нажать на раскрывающуюся динамику c показать и скрыть значение от ВСЕХ ВЫБЕРИТЕ одним классом. 

jQuery.each($("select.gr-fields-select"), function(){            
$(".gr-fields-select").change(function() {
if($(".gr-fields-select").val() != "") {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
$(".gr-fields-select option[value="+$(".gr-fields-select").val()+"]").hide();
} else {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
}
});
})

Пожалуйста, проверьте jdfiddle здесь: https://jsfiddle.net/mhassan94/d6j3fpt2/3/

Если выбрано одно раскрывающееся значение, они скрываются от раскрывающегося списка Все, но если измените выбранное значение в раскрывающемся списке, они показывают предыдущее значение и скрывают новое значение в раскрывающемся списке Все.

Как этого лучше достичь?

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Так что не изобретайте колесо заново. Я думаю, что множественный выбор, такой как select2, может выполнить то, что вы хотите, намного проще, чем множественные выпадающие списки. select 2 даже позволяет вам ограничить длину выбора, если вы хотите только два. Я думаю, что с несколькими выпадающими списками есть что отследить. особенно если вы хотите более двух выпадающих. Что если они выберут выбранное из заказа? запустите приведенный ниже фрагмент кода, чтобы увидеть возможную реализацию с использованием множественного выбора 

$(document).ready(
    function () {
        $("#multipleSelectExample").select2({
          maximumSelectionLength: 2,
          closeOnSelect: false,
          allowClear: true
        });
    }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css">

<select id="multipleSelectExample" data-placeholder="Select" multiple>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
0 голосов
/ 26 апреля 2020

Это то, что вы хотите сделать? 

$(".gr-fields-select").change(function(){
  var selectedValue = $(this).val();
  $(".gr-fields-select").each(function(ind, item){
     if($(item).find(':selected').value!=selectedValue){
     $(item).find('option').each(function(index,option){
        if(option.value!=selectedValue){
          $(option).show();
        }else{
          $(option).hide();
        }
      });
    }  
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>First</label><select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<br>
<label>Second</label><select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<br>

Если вам нужно скрыть значение, выбранное в одном конкретном элементе выбора, из всех значений, заполненных в остальных элементах выбора, попробуйте это, 

$(".gr-fields-select").change(function(){
	
  var selectedValue = $(this).val();
  var previousValue = $(this).data("new");
  if(previousValue!=undefined){
  	$(this).data("old",previousValue);
  }
  $(this).data("new",selectedValue);
  $(".gr-fields-select").each(function(ind, item){
     if($(item).find(':selected').value!=selectedValue){
     $(item).find('option').each(function(index,option){
        if(option.value==selectedValue){
           $(option).hide();
        }
        if(option.value==previousValue){
         	 $(option).show();
        }
      });
    }  
  }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>


<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
...