Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Изменять option по кликам на ссылки (https://javascript.ru/forum/css-html/83007-izmenyat-option-po-klikam-na-ssylki.html)

Quark_ 25.08.2021 10:29
Изменять option по кликам на ссылки
 
Подскажите плиз со скриптом, при помощи которого по клику на ссылку - менялся бы соответствующий 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 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 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>

рони 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 25.08.2021 23:13
Цитата:
Сообщение от рони
a.indexOf(target)
Я как раз не хотел такое использовать. :)
Решил один раз определить в цикле.


Часовой пояс GMT +3, время: 21:33.