javascript - 需要结合 jquery 函数的帮助

Question

我正在尝试将几个不同的 jquery 函数组合在一起，以帮助我完成我正在从事的项目。

第一部分似乎可以工作(填充两个输入文本框，但我无法使用我提供的数组填充第二个选择下拉列表。我确信这很简单，但对于 jquery 来说我不太懂弄清楚。

编辑

我需要拆分第一个“选择”下拉列表的选项值(用“_”分隔)并将它们发送到显示的两个文本框。这对于我的页面的功能很重要。

这是我的 html

<form action="/revenue_lines/lock" id="lockLockForm" method="post" accept-charset="utf-8">
<input type="text" id="RevenueLineDate1">
<input type="text" id="RevenueLineDate2">
<select id="selector">
    <option value="Data1_<Data1>">Sample1</option>
    <option value="Data2_<Data2>">Sample2</option>
</select>
<select id="item"></select>

这是我的 jquery

$('#selector').on('change', function () {
var val = this.value;
var parts = val.split("_");
$('#RevenueLineDate1').val(parts[0]);
$('#RevenueLineDate2').val(parts[1]);
});

Sample1 = new Array('Top Story', 'Cases', 'News');
Sample2 = new Array('Top Story', 'Cases', 'News');

populateSelect();

$(function () {

$('#selector').change(function () {
    populateSelect();
});

});

function populateSelect() {
selector = $('#selector').val();
$('#item').html('');

eval(selector).forEach(function (t) {
    $('#item').append('<option>' + t + '</option>');
});
}

这里是 jsfiddle 的链接我正在工作。

非常感谢!

Answer 1

你就快到了!

试试这个 HTML:

<select id="selector">
    <option value="Sample1">Sample1</option>
    <option value="Sample2">Sample2</option>
</select>

您的 .val() 正在获取所选 <option> 的 value 属性，而不是文本。

编辑:

我从您的编辑中看到原始值对您很重要。在这种情况下，请替换您的 .val()在 populateSelect 中使用 .text()你会得到我认为你想要的行为。

function populateSelect() {
    selector = $('#selector').text();
    $('#item').html('');

    eval(selector).forEach(function (t) {
        $('#item').append('<option>' + t + '</option>');
    });
}

请注意，我通常不会考虑使用可见文本作为一种好的做法 - 它会阻止您执行诸如本地化文本之类的操作。一种替代方法是使用 split() 关闭值的第一部分(Data1、Data2)。并将它们用作数组名称。然后您就可以随意更改显示的文本，而不会破坏您的功能。