JQuery UI Combobox для трех лучших ответов

У меня есть форма, в которой пользователю нужно выбрать три основных языка.

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>

Когда пользователь выбирает свой первый язык, этот язык не должен отображаться в параметрах Top 2 и Top 3, а когда пользователь выбирает свой язык Top 2, то в Top 3 не должны отображаться языки Top 1 и Top 2.

когда пользователь изменяет Top 1 или Top 2, другие должны обновляться соответственно.


html jquery combobox jquery-ui
person Kaleem Nalband    schedule 02.08.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте код ниже: где у вас может быть прослушиватель изменений для selectBox, внутри которого вы можете повторять и проверять значение каждого поля выбора и отключать его для других.

$(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>

person Bhushan Kawadkar    schedule 02.08.2018
comment
Это хороший ответ, однако, если вы посмотрите на его codepen, у него есть специальная оболочка со списком. Я попробовал подобное решение, и оно не работает с его пользовательским полем со списком. - person gkgkgkgk; 02.08.2018
comment
это отличное решение, но я использую поле со списком jQueryUI. здесь проблема в том, что я не получаю событие изменения после того, как пользователь выбирает язык. - person Kaleem Nalband; 02.08.2018
comment
Вы должны были четко указать, что вы используете выпадающий список, о котором идет речь. Кстати, взгляните на событие изменения поля со списком, поместите в него мою опубликованную логику и обновите поле со списком stackoverflow.com/questions/4760285/jquery-ui-combobox-onchange - person Bhushan Kawadkar; 02.08.2018
comment
@BhushanKawadkar спасибо за это решение, ваша логика работает нормально, но когда пользователь выбирает первый язык как java, тогда два и три верхних языка должны быть отключены, но в вашем случае это не работает. пожалуйста, посмотрите... - person Kaleem Nalband; 02.08.2018
comment
@BhushanKawadkar, пожалуйста, проверьте codepen.io/kaleem78/full/YjLGBN я почти реализовал вашу логику в мое поле со списком, но все же, когда пользователь выбирает java, другой должен отключить его, он не работает так, пожалуйста, помогите - person Kaleem Nalband; 02.08.2018
comment
я сделал это, вышеупомянутая проблема была решена с помощью заполнителя, такого как фиктивная опция, в верхней части списка опций, если вы хотите, вы можете проверить обновленную ссылку здесь codepen.io/kaleem78/pen/YjLGBN - person Kaleem Nalband; 02.08.2018

arrow_upward
0
arrow_downward

Напишите прослушиватель jQuery для раскрывающегося списка. Когда параметр выбран, удалите его из других раскрывающихся списков. Я приведу пример через секунду.

Вот основная логика удаления опций:

$('select').not($(this)).find('option[value=' + value +']').prop('disabled', true);
person gkgkgkgk    schedule 02.08.2018
comment
ПОДСКАЗКА: для списка событий; select: function (event, ui) { alert(событие select сработало!); } - person Kaleem Nalband; 02.08.2018
comment
@KaleemNalband нет, я пока не уверен, как это сделать с помощью пользовательского интерфейса jQuery, извините. - person gkgkgkgk; 02.08.2018
comment
проверьте это, я почти сделал, проверьте, что когда пользователь выбирает java, другой должен отключить его. как этого добиться? я думаю, мы должны использовать заполнитель или что-то в этом роде - person Kaleem Nalband; 02.08.2018
comment
@KaleemNalband отлично сделано, у меня очень похожий код, собирался обновить свой ответ. - person gkgkgkgk; 02.08.2018
comment
@KaleemNalband Я отредактировал свой ответ, указав основную строку, чтобы удалить параметры. Вам не нужен цикл for вокруг строки, которую я разместил - person gkgkgkgk; 02.08.2018