javascript - 使用表单中的变量作为DOM选择器

我以为我已经过了笨拙的小事，但是我可以使用一些帮助。我正在尝试使用由表单输入制成的变量，因此请按ID选择（使用JS或jQuery）元素。最终目标是根据选择内容删除HTML中的某些元素。

我拥有的Javascript / jQuery和尝试过的一些东西。

function showLocation() {
    var locationRef = document.getElementById("ddlViewBy"),
        locationChoice = locationRef.options[locationRef.selectedIndex].value,
        selectionChoice = document.getElementById("selectionChoice");

    (function() {
        $('#locationChoice').toggleClass("ClassHide");
        return false;
    })();
});

而不是$（'＃locationChoice'）我尝试了$（'locationChoice'）和$（locationChoice）。

当我console.log（locationChoice）我得到正确的选择，所以我不认为那样。

我也尝试了没有jQuery

locationChoice.classList.remove("classHide");

这是HTML

<form onsubmit="return showLocation()" id="testLocation">
<h4>Please select a location</h4>
<select id="ddlViewBy">
    <option value="spotOne">Test Spot One</option>
    <option value="spotTwo">Test Spot Two</option>
</select>
<button type="submit" form="testLocation" value="Submit">Select</button>

<div id="spotOne">
    <p>Remove Me One</p>
</div>
<div id="spotTwo">
    <p>Remove Me Two</p>
</div>

任何拼写错误或语法错误都可能是清理和粘贴所有内容所致。我非常感谢您的帮助。

最佳答案

以@Quantastical答案为基础。

实际上有2个错误：


鉴于locationChoice是一个字符串，我们将需要执行以下操作：
$（'＃'+ locationChoice）;
函数中的立即函数有返回值，但原始函数没有返回值。


我不太了解即时功能的意图；但是，只需添加return使其起作用。

return (function() {
$("#" + locationChoice).toggleClass("ClassHide");
return false;
})();

或没有功能：

$("#" + locationChoice).toggleClass("ClassHide");
return false;

参见：Working example

编辑：还要确保检查出@Barmar建议，以作为对您的帖子的评论。