javascript - 使用js在选择时获取所选项目

标签 javascript jquery list select

看,我快疯了,我无法在普通的选择下拉列表中获取所选项目(列表的值是用 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>

很简单

最佳答案

检查一下

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

关于javascript - 使用js在选择时获取所选项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57426284/

相关文章:

javascript - 如何通过 webpack 导入 bootstrap?

javascript - 返回未定义的 jquery 节点名

c# - 将对象转换为列表

c# - 如何将 IEnumerable<IEnumerable<T>> 转换为 List<List<T>>

javascript - show() 一个用 children() 隐藏的 div(拖放)

java - 有什么方法可以从包含 HashMap 的 ArrayList 的 HashMap 中获取值列表吗?

javascript - 如何将ajax响应转换为html

javascript - Angular 将 HTML 响应数据显示到 View 中

匹配 '|' 且前面没有 '\' 的 JavaScript 正则表达式(lookbehind 替代方案)

javascript - 下拉列表中的 Bootstrap 搜索表单