Kак при клике на элемент списка LI определить его порядковый номер и выбрать соответствующий OPTION в SELECT?

Question

[tostername]

Подскажите пожалуйста, как при клике на элемент списка LI определить его порядковый номер и выбрать соответствующий OPTION в SELECT на JavaScript?

Что-то вроде:

<ul onclick='javascript:...'>
	<li>List1</li>
	<li>List2</li>
	<li>List3</li>
</ul>

<select name="select1" id="select1">
	<option value="1">Option1</option>
	<option value="2">Option2</option>	
	<option value="3">Option3</option>
</select>

Answer 1

[ProjectSoft]

https://jsfiddle.net/nn3fmoz7/

Answer 2

[Rsa97]

Самое простое - заранее прописать data-value в тэгах.

Comments

[tostername]

<ul onclick='javascript:alert(document.getElementById("vt").value)'>
  <li id="vt" data-value="1">List1</li>
  <li id="vt" data-value="2">List2</li>
  <li id="vt" data-value="3">List3</li>
</ul>

<select name="select1" id="select1">
  <option value="1">Option1</option>
  <option value="2">Option2</option>	
  <option value="3">Option3</option>
</select>

Ноль возвращает

[Rsa97]

tostername: Во-первых, id должен быть уникальным в пределах страницы. Во-вторых, доступ к data-аттрибутам выполняется через getAtribute() или свойство dataset. В третьих, используйте всплытие события.

<ul onclick="console.log(event.target.getAttribute('data-value'))">
  <li data-value="1">Test 1</li>
  <li data-value="2">Test 2</li>
</ul>

Answer 3

[Dmitry Pavlov]

C помощью index() - индекс начинается с ноля (у первого элемента индекс === 0)

$("li").click(function() {
  var index = $(this).parent().children().index(this);
  alert("порядковый номер " + index);
});

Answer 4

[lega]

Сделал за 20 сек https://jsfiddle.net/lega911/2tk61x3r/