jQuery UI Combobox for top three responses

Question

I have a form where user need to select his top three langauges.

https://codepen.io/kaleem78/full/YjLGBN/

<table>
  <tr><td>Top 1</td><td><select name='myselect'>

  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>

  <tr><td>Top 2</td><td><select name='myselect2'>

  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>

  <tr><td>Top 3</td><td><select name='myselect3'>
  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>
</table>

When user select his top 1 language, that language should not be shown in Top 2 and Top 3 options and when user selects his Top 2 language, then the Top 3 should not show Top 1 and Top 2 languages.

when user changes the Top 1 or Top 2 other should update accordingly.

gkgkgkgk · Answer 1 · 2018-08-02T13:32:21.810

0

Write a jQuery Listener for a dropdown. When an option is chosen, remove those options from the other dropdowns. I'll have an example up in a second.

Here is the main logic for removing the options:

$('select').not($(this)).find('option[value=' + value +']').prop('disabled', true);

edited Aug 02 '18 at 13:32

answered Aug 02 '18 at 12:00

gkgkgkgk

707
2
7
26

HINT: for event listner; select: function (event, ui) { alert("the select event has fired!"); } – Kaleem Nalband Aug 02 '18 at 12:46
@KaleemNalband no, I am not sure as of now how to accomplish this with jQuery UI, sorry. – gkgkgkgk Aug 02 '18 at 13:11
1

check this, i have almost done, please check that when user selects java the other should disable it. how to achieve this? i think we should use placeholder or something – Kaleem Nalband Aug 02 '18 at 13:29
@KaleemNalband nicely done, I have very similar code, was going to update my answer. – gkgkgkgk Aug 02 '18 at 13:31
@KaleemNalband I edited my answer with the basic line to remove the options. You do not need the for loop surrounding the line I posted – gkgkgkgk Aug 02 '18 at 13:33

score 0 · Accepted Answer · answered Aug 02 '18 at 12:15

0

Try below code: where you can have change listener for selectBox inside which you can iterate and check value of each select box and disabled it for others.

$(function(){
    $('.selectBox').on('change', function(){
          $('.selectBox').find('option').prop('disabled',false);
          $('.selectBox').each(function(){
              var value= $(this).val();
              $('.selectBox').not($(this)).each(function(){
                 $(this).find('option[value=' + value +']').prop('disabled', true);
              });
          });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>Top 1</td><td><select name='myselect' class='selectBox'>

  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>

  <tr><td>Top 2</td><td><select name='myselect2' class='selectBox'>

  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>

  <tr><td>Top 3</td><td><select name='myselect3' class='selectBox'>
  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>
</table>

answered Aug 02 '18 at 12:15

Bhushan Kawadkar

28,279
5
35
57

Thats a good answer, however, if you look at his codepen, he has a custom combobox wrapper. I tried a similar solution and it does not work with the custom combobox he has. – gkgkgkgk Aug 02 '18 at 12:20
thats great solution, but i am using jQueryUI's combobox. here the problem is i am not getting the change event after user selects the language. – Kaleem Nalband Aug 02 '18 at 12:44
You should have mentioned this clearly that you are using combobox in question posted. BTW, please take a look at change event of combobox and put my posted logic in it and refresh the combobox https://stackoverflow.com/questions/4760285/jquery-ui-combobox-onchange – Bhushan Kawadkar Aug 02 '18 at 12:51
@BhushanKawadkar thank you for this solution, your logic works fine but when user selects the top 1 language as java then top 2 and top 3 must be disabled, but in your case its not working like that. please have a look... – Kaleem Nalband Aug 02 '18 at 13:24
@BhushanKawadkar please check https://codepen.io/kaleem78/full/YjLGBN/ i almost implemented your logic in my combobox, but still when user selects java other should disable it, its not working like that, please help – Kaleem Nalband Aug 02 '18 at 13:26
i have done it, above mentioned issue was solved by using placeholder like dummy option at the top of option list, if you want you can check the updated link here https://codepen.io/kaleem78/pen/YjLGBN – Kaleem Nalband Aug 02 '18 at 13:41

jQuery UI Combobox for top three responses

2 Answers2