CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
Amlan
Amlan

Reputation: 139

Array of select field with same name and different id.

I have an array of select fields all having the same list of option value. What i am trying to get is, if a value is selected in any of the field, it should not show on the other. Below is an example code. For example, if I am having four select fields, if I select 'a' on first field, the value "a" should not appear on the next select field. Same with other values of "b", "c" and "d". I am trying to use java script for the same. I am in learning phase. help will be really appreciated. Thanks 

<select name='list' id='list_1'>
    <option value='a'>a</option>
    <option value='b'>b</option>
    <option value='c'>c</option>
    <option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>

</select>
<select name='list' id='list_3'>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='d'>d</option>
</select>

Upvotes: 0

Views: 601

Answers (3)

dandavis
dandavis

Reputation: 16726

Since you don't want to destroy the data, you need to hide the options. That's tricky because you have multiple state to combine.

you can make several IF comparisons, hard-code a table of combos for each group and options (yuck), or use a mountain of JS to solve this, but i think that CSS is better.

A simple way to accomplish this is to use CSS; multiple classes on a single element that translate your many states into rules that can be applied instantly and generically (without hard-coding ids or names).

<select name='list' id='list_1'>
    <option value='a'>a</option>        <option value='b'>b</option>
    <option value='c'>c</option>        <option value='d'>d</option>
</select>
<select name='list' id='list_2'>
    <option value='a'>a</option>        <option value='b'>b</option>
    <option value='c'>c</option>        <option value='d'>d</option>
</select>
<select name='list' id='list_3'>
    <option value='a'>a</option>        <option value='b'>b</option>
    <option value='c'>c</option>        <option value='d'>d</option>
</select>
<select name='list' id='list_4'>
    <option value='a'>a</option>        <option value='b'>b</option>
    <option value='c'>c</option>        <option value='d'>d</option>
</select>


<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>  
<script>

var combos=[], // store the css we need to define hide/show rules
    classes= new Array($("select").length); //a place to store many states

$("select").each(function(i,e){ // for every drop down,      
   $(this).change(function(){ // when it changes:
    classes[i]=this.value; // update array with changed value in right slot
    document.body.className=classes.join(" "); // update body class with array
   });

});

$("select option[value]").each(function(n, a){ // make css to hide each option if body has the same class:
  combos.push( "body."+a.value+" option[value='"+a.value+"'] ");
});

//append the dynamic CSS to the head:  
$("head").append("<style> "+combos+"{ display: none; }</style>");  

</script>

online demo: http://pagedemos.com/pe2uf5vkx9vh/

if you want to restrict this functionality to certain drop downs, give them a class like <select class=hider and change $("select to $("select.hider in the code above.

if you have values with spaces, you'll need fancier CSS selectors than class, like data-state="|a b|hello world|honda crv|" attribs that you can delimit and hit with partial attribute selectors (body[data-state*='|hello world|']...), but the same pattern can work with many and more complex states.

Upvotes: 1

Edi 0
Edi 0

Reputation: 212

Try this code that i have written .. Hope should help

<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>
<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>
<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

$(document).on('change', 'select', function() {
   $(this).find('option:selected').addClass('keepit');
   $('option[value="' + this.value + '"]:not( .keepit)').remove();
});

https://jsfiddle.net/av46dbo1/

Upvotes: 1

Mir Gulam Sarwar
Mir Gulam Sarwar

Reputation: 2648

Fiddle 

 $(function(){
      $('#list_1').change(function(){
      var valueToRemove=$(this).val();

      $('select').not('#list_1').each(function(){
      var currentId=$(this).prop('id');
      $("#"+currentId+" option[value="+valueToRemove+"]").remove();
      })
    })
    })

Upvotes: 0

Related Questions