使用 jQuery 在嵌套列表视图中获取 DDL 选定值

Question

我有一个嵌套的 ASP.NET ListView，外部的一个呈现问题组，内部的一个呈现组内不同的问题。一些问题以下拉列表的形式呈现。我想在不进行回发的情况下检测更改的选定值。我见过很多看起来像“$(#control).val()”的引用，但我需要更多的灵活性。

我在 C# 代码中添加 JavaScript，它看起来像这样：

js = string.Format("javaScript:setInputSelectOption('{0}'); return false;", hidSelector.Value);
ddlInputSelectOptions.Attributes.Add("onchange", js);

生成的 aspx 文件包含此生成的代码；

<div id='Management_q2'>
<input type="hidden" name="ctl00$body$lstExecutive$ctrl1$hidSelector" id="ctl00_body_lstExecutive_ctrl1_hidSelector" value="Management" />
    <select name="ctl00$body$lstExecutive$ctrl1$ddlInputSelectOptions"
  id="ctl00_body_lstExecutive_ctrl1_ddlInputSelectOptions" 
  onchange="javaScript:setInputSelectOption('Management'); return false;">
    <option value="0">Not Present</option>
    <option selected="selected" value="1">Occasionally</option>
    <option value="2">Customarily and Regularly</option>
    <option value="3">Constantly</option>
</select>
</div>

我的 .js 文件包含以下代码：

function setInputSelectOption(question) {
    var n = $('[id$=' + question + '_q2]>[id$=hidSelector]').val();
    var v = $('[id$=' + question + '_q2]>[id$=ddlInputSelectOptions]');
    setDDLData(n, v);
}

使用 Chrome，我在“var v =”行上尝试了这些变体，并得到了相应的结果：

$('[id$=' + question + '_q2]>[id$=ddlInputSelectOptions]'): d.fn.d.init[1] $('[id$=' + 问题 + '_q2]>[id$=ddlInputSelectOptions]').value: 未定义 $('[id$=' + 问题 + '_q2]>[id$=ddlInputSelectOptions]').val(): ""

所以我（再一次）寻找正确的咒语来向 jQuery 发声，以便它从 DDL 返回选定的值。

Answer 1

我建议保持简单。将 data- 属性添加到您希望从中获取值的 DDL。使用 jQuery 查找值。

ddl.Attributes.Add("data-ddl","reference");

然后在 JS 中。

// get value
var ddlValue = $("select[data-ddl='reference']").val();
// assign value
$("select[data-ddl='reference']").val("option");

另外，如果 JS 仅用于 UI 逻辑，最好将其保留在 C# 代码之外，并在准备好使用 jQuery 的页面上运行它。所以在你的 JS 文件中。

$(function(){
    // bind a function to the select change event
    $("select[data-ddl='reference']").change(function(){
        // insert UI logic here
    });
});