jquery выборка option из select по нажатию radio

Question

Здравствуйте нужна помощь с jquery

Как установить определенному <option "selected" по нажатию на определенный radio

На пример:

<div>
<label> <input type="radio" name="myrad" value="rad1">one </label>
<label> <input type="radio" name="myrad" value="rad2">two </label>
<label> <input type="radio" name="myrad" value="rad3">three </label>
<label> <input type="radio" name="myrad" value="rad4">four </label>
<label> <input type="radio" name="myrad" value="rad5">five </label>
</div>

<select id="mysel">
  <option value="opt1">one</option>
  <option value="opt2">two</option>
  <option value="opt3">three</option>
  <option value="opt4">four</option>
  <option value="opt5">five</option>
</select>

То есть если мы выбираем кнопку radio two, в select для option two - должно выставляться selected

Заранее спасибо

Answer 1

Сначала берём все input с типом radio и именем myrad , и вешаем на них событие change(изменения) внутри мы получаем индекс элемента по которому кликнули, а далее присваиваем элементу option с тем же индексом.

 $(document).ready(()=>{
    const $inputs = $('input[type=radio][name=myrad]')
    $inputs.on('change',function(){
        const indx = $inputs.index(this)
        $('#mysel option').eq(indx).prop('selected', true)
    })
    })

<div id="labelsBlock">
        <label> <input type="radio" name="myrad" value="rad1">one </label>
        <label> <input type="radio" name="myrad" value="rad2">two </label>
        <label> <input type="radio" name="myrad" value="rad3">three </label>
        <label> <input type="radio" name="myrad" value="rad4">four </label>
        <label> <input type="radio" name="myrad" value="rad5">five </label>
    </div>
    <select id="mysel">
        <option value="opt1">one</option>
        <option value="opt2">two</option>
        <option value="opt3">three</option>
        <option value="opt4">four</option>
        <option value="opt5">five</option>
    </select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Для вашего HTML он должен работать

БЛОГ НА HUSL

jquery выборка option из select по нажатию radio

Ответы (1 шт):