javascript - How to prevent same selected values in multiple drop down lists in a table & POST to server -


example: imagine table of babies, with each row users selects baby genderdropdown, selects name. need prevent duplicate name selection across table, if user select male & john, cannot select again in row. except babies, table has rows contain projects, , billcodes dropdowns. if disable select option in dropdown, not post server!

$('.timecodeddlid').find('option[value=' + $(this).val() + ']').prop('disabled', true); works but disabled not post selected value server


question: how can prevent duplicate selection in second dropdown? while found answers on here. however, fail - , dont posting server**. $('.timecodeddlid').find('option[value=' + $(this).val() + ']').prop('disabled', true); not post server side.


rendered html snippet table, dropdown rows

 <tbody id="ts">  <tr class="rowcss"> //row 1  <td>   <span class="project">     <select class="form-control projectcodeid" id="records_0__selectedprojectfromlist" name="records[0].selectedprojectfromlist">       <option value="">modeling</option>       <option value="1">ventosanzap</option>       <option value="2">modeling</option>     </select>   </span> </td> <td>   <input type="hidden" name="records.index" value="0">     <span class="billingcodecss">       <select class="form-control timecodeddlid" id="records_0__selectedbillingcodesfromlist" name="records[0].selectedbillingcodesfromlist">         <option value="">budget-070</option>         <option selected="selected" value="5">budget-070  </option>         <option value="6">budget-784                                        </option>       </select>     </span>   </td> </tr> <tr class="rowcss"> //row 2    <td>     <span class="project">       <select class="form-control projectcodeid" id="records_0__selectedprojectfromlist" name="records[0].selectedprojectfromlist">         <option value="">modeling</option>         <option value="1">ventosanzap</option>         <option value="2">modeling</option>       </select>     </span>   </td>   <td>     <input type="hidden" name="records.index" value="0">       <span class="billingcodecss">         <select class="form-control timecodeddlid" id="records_0__selectedbillingcodesfromlist" name="records[0].selectedbillingcodesfromlist">           <option value="">budget-070</option>           <option selected="selected" value="5">budget-070  </option>   // how prevent duplicate , still post server            <option value="6">budget-784                                        </option>         </select>       </span>     </td>   </tr> //  </tbody> 

javascript onchange prevent duplicate selections

    //disable other previous/next selected timecodes on change     $('#ts').on('change', '.timecodeddlid', function () { //baby name check          //is correct dropdown selecting why not $this?         var allselectedbillingcodedropdown = $('#ts .timecodeddlid option:selected');         var thisbillingselecteddropdown = $(this);         var currentselectbillingcode = $(this).val();         // exisiting vlaue seelections         $.each(allselectedbillingcodedropdown, function (index, item) {             if ($(item).val() == currentselectbillingcode)             {                 debugger;                 // remove selection                 //selectedbillingcodedropdown.find('option[value=' + currentselectbillingcode + ']').remove();                 thisbillingselecteddropdown.find('option[value=' + currentselectbillingcode + ']').remove();                 //alert userd                 alert('billing code cannot same');                 return false;             }              // $('#select_id').find('option[value=' + foo + ']').remove();             //item.remove          }); 

enter image description here

you can try way      $(document).ready(function() {           $("select").on('hover', function () {                 $previousvalue = $(this).val();             }).change(function() {                 $("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);                 $("select").not(this).find("option[value='"+ $previousvalue + "']").attr('disabled', false);             });         });      $("#confirm-form").submit(function(e) {         e.preventdefault();         $("select").find("option").removeattr('disabled');         document.getelementbyid('confirm-form').submit();     }); 

Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -