Форум

Quark_ · #1 (**permalink**) 25.08.2021, 10:29

Подскажите плиз со скриптом, при помощи которого по клику на ссылку - менялся бы соответствующий option в селектбоксе.

<div>
<a href="#">Поменять</a>
<a href="#">Поменять</a>
<a href="#">Поменять</a>
</div>

<div>
<select type="select" name="data" id="" class="">
<option value="9 сентября">9 сентября</option>
<option value="13 октября">13 октября</option>
<option value="20 ноября">20 ноября</option>
</select>
</div>

Пробовал с onclick, но не получилось ничего.

od0201 · #2 (**permalink**) 25.08.2021, 13:47

<body>
  <div>
    <a href="#">Поменять</a>
    <a href="#">Поменять</a>
    <a href="#">Поменять</a>
    </div>
    
    <div>
    <select type="select" name="data" id="" class="">
    <option value="9 сентября">9 сентября</option>
    <option value="13 октября">13 октября</option>
    <option value="20 ноября">20 ноября</option>
    </select>
    </div>
    
</body>
<script>
  const arrA=document.querySelectorAll('a')
  const arrOption=document.querySelectorAll('select > option')
  arrA.forEach(function(e,i) {
    e.addEventListener('click', function() {
      arrOption[i].setAttribute('value','изменено')
      arrOption[i].innerHTML='изменено'
    })
  })
</script>

ksa · #3 (**permalink**) 25.08.2021, 20:37

od0201, может ему такой вариант нужен...

<div id='test'>
	<a href="#">Поменять</a>
	<a href="#">Поменять</a>
	<a href="#">Поменять</a>
</div>

<div>
	<select type="select" name="data" id="" class="">
		<option value="9 сентября">9 сентября</option>
		<option value="13 октября">13 октября</option>
		<option value="20 ноября">20 ноября</option>
	</select>
</div>

<script>
	const o = document.querySelector('#test')
	o.addEventListener('click', e => {
		const el = e.target
		if (el.tagName !== 'A') return
		const o = document.querySelector('select[name="data"]')
		o.selectedIndex = el.dataset.itm
	})
	const arr=o.querySelectorAll('a')
	arr.forEach((el, i) => el.dataset.itm = i)
</script>

рони · #4 (**permalink**) 25.08.2021, 22:30

ksa,

<div id='test'>
    <a href="#">Поменять</a>
    <a href="#">Поменять</a>
    <a href="#">Поменять</a>
</div>

<div>
    <select type="select" name="data" id="" class="">
        <option value="9 сентября">9 сентября</option>
        <option value="13 октября">13 октября</option>
        <option value="20 ноября">20 ноября</option>
    </select>
</div>

<script>
    const d = document.querySelector('#test');
    const s = document.querySelector('select[name="data"]');
    const a = Array.from(d.children);
    d.addEventListener('click', ({target}) => {
        if (target = target.closest('a')) s.selectedIndex = a.indexOf(target);
    })
</script>

ksa · #5 (**permalink**) 25.08.2021, 23:13

Сообщение от рони

a.indexOf(target)

Я как раз не хотел такое использовать.

Решил один раз определить в цикле.

Форум

Справочник

Discord чат

Курсы javascript