使用 js 在选择时获取所选项目答案

【问题标题】：Get selected item on select with js使用 js 在选择时获取所选项目
【发布时间】：2019-12-16 23:20:56
【问题描述】：

看，我快疯了，我无法在正常的选择下拉列表中获取所选项目（列表的值是用 js 动态创建的）。

我有一个项目列表，它们是表格的列，我希望当我单击一个项目时，该列被添加到表中，如果我再次单击该项目中的该列，则该列被删除。

我尝试使用 jquery 的 change 事件和 js 的 onchange 事件，但是如果我连续两次选择该项目，则添加但未删除该列，因为该值没有更改。我试图为选择的选项提供一个 onclick 事件，但是当我单击一个时没有任何反应。我尝试使用以下代码从带有 jquery 的选择中捕获单击的选项：

$("#selectTableLt").on("click", "option", function() {
let clickedOption = $(this);
console.log(clickedOption);
});

但什么也没发生。

谁能帮我解决这个问题，好吗？谢谢

编辑：

我的html：

<select name="leftColumns" id="selectTableLt"></select>

我使用 javascript 加载选项，但它们看起来像：

<option value="opt1">Option 1</option>

很简单

【问题讨论】：

我认为查看您的 HTML 标记会有所帮助

标签： javascript jquery list select

【解决方案1】：

看看这个

<!DOCTYPE html>
<html>
	<head>
		<title>Select from  dropdown list</title>
	</head>

	<body>

		<h1>Select from  dropdown list</h1>

		<p id="result">Result here</p>
		
		<select id="country">
			<option value="None">-- Select --</option>
			<option value="ID1">America</option>
			<option value="ID2" selected>India </option>
			<option value="ID3">England</option>
		</select>

		<script>

			function GetSelectedValue(){
				var e = document.getElementById("country");
				var result = e.options[e.selectedIndex].value;
				
				document.getElementById("result").innerHTML = result;
			}

			function GetSelectedText(){
				var e = document.getElementById("country");
				var result = e.options[e.selectedIndex].text;
				
				document.getElementById("result").innerHTML = result;
			}
			
		</script>

		<br/>
		<br/>
		<button type="button" onclick="GetSelectedValue()">Get Selected Value</button>

		<button type="button" onclick="GetSelectedText()">Get Selected Text</button>
	</body>

</html>

【讨论】：

嗨@Avinash，alexmaza_wd 想改用点击事件
嗨，它发生了同样的情况，它总是记录结果，即使我只是单击选择来部署列表，因为我不能用外部按钮来做，我必须这样做选择，但谢谢！

【解决方案2】：

这里是处理多次点击事件并获取下拉选择值的解决方案

var oldValue = null;
$(document).on("click","#selectTableLt", function(){
  s = $(this);
  val = s.val();
  if (oldValue == null) {
      oldValue = val;
  } else {
      var newValue = s.val();
      if (newValue != "") {
       var finalVal  = oldValue == s.val() ?  oldValue : newValue;
       console.log(finalVal)
      }

      $(document).unbind('click.valueCheck');
      oldValue = null;      
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectTableLt">
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

您需要使用 $.val() 函数获取值

将事件绑定到文档以处理动态事件监听器

$(document).on( eventName, selector, function(){} );

使用更改事件：

    $(document).on("change","#selectTableLt", function() {
 let clickedOption = $(this).val();
 console.log(clickedOption);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectTableLt">
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

使用点击事件：

$(document).on("click","#selectTableLt", function() {
 let clickedOption = $(this).val();
 console.log(clickedOption);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectTableLt">
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

【讨论】：

不，它不起作用。我改变了它，我什至在chrome的开发工具中放了一个断点，然后点击select的选项，它并没有停在那里。它没有得到事件
试试我更新的代码，我现在已经绑定到更改事件
现在它可以工作了，但是如果我单击选项 1，它会登录控制台“选项 1”，但是如果我单击另一个时间选项 1，它什么也不做，因为值没有改变，但我需要在同一选项中捕获第二次点击
我们已经使用更改事件替换更改为单击然后它会工作，。我在答案中添加了相同的代码
哇！它完美地工作！你太不可思议了！哈哈哈非常感谢！我快疯了！哈哈哈