Question

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

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

>

我尝试将更改事件与jquery一起使用，将onchange事件与js一起使用，但是如果我连续两次选择该项目，则会添加但不删除该列，因为值没有更改。我试图给选择的选项提供一个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>

这很简单

Answer 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>

Answer 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>

使用Click事件：

$(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>

使用js

2 个答案: