从getJSON的成功函数中设置选择输入的值时出现问题

Question

我有一个带有选择输入的html页面，用于过滤函数中的getJSON请求。 在请求的成功函数中，我从 JSON 动态创建一个 html 表，并将该表附加到 html 文档中的div。 一切正常，但选择输入在调用函数时重置回默认值。

我正在尝试将选择输入设置回所选值，以便最终用户知道他们正在查看哪些数据。 我将选择输入的类名存储在名为 p1Name 的参数中，将所选值存储在名为 p1 的参数中。

通常我会使用这样的东西：$('.ddlUserID').Val(p1);类名是硬编码的。但是我需要这个函数是动态的，并且需要使用 p1Name 的参数作为类名。 所以我试过：

var DDL1 = "'." + p1Name + "'";
$(DDL1).val(p1); 

这将返回以下错误，未捕获错误：语法错误，无法识别的表达式：".ddlUserID"。我还尝试了返回相同错误的document.getElementsByClassName(DDL1).value = p1;的 JavaScript 语法。

如果我将 DDL1 的参数更改为".ddlUserID"的硬编码值，则表单将按预期工作。

使用参数作为 id 或类名时，设置选择输入的选定值的正确方法是什么？

Answer 1

您无需向选择器字符串添加额外的引号。

var DDL1 = "." + p1Name;
$(DDL1).val(p1); 

这应该有效

Answer 2

省略var DDL1 = "'." + p1Name + "'";中多余的引号

应该var DDL1 = '.' + p1Name;

Answer 3

它应该可以工作，您可以在选择器中使用字符串。我认为你不需要单引号

var p1Name = 'ddlUserID'
var selector1 = `.${p1Name}`
var selector2 = '.' + p1Name
console.log('selector1:', $(selector1))
console.log('selector2:', $(selector2))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ddlUserID">ddlUserID</div>

Answer 4

您可以使用 JQuery 中的.val()来设置选择输入的值。

使用参数作为 id 或类名时，设置选择输入的选定值的正确方法是什么？

看到这个： https://stackoverflow.com/a/5891929/11860085。

$(document).ready(function(){
var p1 = "foo";
var p2 = "bar";

var p1name = "some_id";
var p2name = "some_class";
$( "#setValues" ).click(function() {
$('#' + p1name).val(p1);
$('.' + p2name).val(p2);
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="setValues">Set values</button>
<select id="some_id">
<option value="" disabled selected>Select something...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="foo">foo</option>
</select>
<select class="some_class">
<option value="" disabled selected>Select something...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="bar">bar</option>
</select>