1

尝试将 div id="test" 更改为使用 javascript 选择的下拉选项中的值。我开始了一个jsfiddle。如果用户选择 2013，则 div id="test" 应更改为 div id="2013" 并显示月份的第二个下拉菜单。年份下拉列表中的值最终将用于查询数据库以获取当年记录的实际月份，但现在我有兴趣更改 div id 并存储该值以供以后使用。

<div class="report_select" id="style_container_div">
    <label>Year:</label>
    <select size="1" id="year" title="" type="select" name="style">
        <option value="">Select Year</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
    </select>
    <div class="clear"></div>
    <div id="error-message-style"></div>
</div>
<div id="test" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
    <label>Select a Month:</label>
    <select>
        <option value=""></option>
        <option value="January">January</option>
        <option value="February">February</option>
        <option value="March">March</option>
        <option value="April">April</option>
        <option value="May">May</option>
        <option value="June">June</option>
        <option value="July">July</option>
        <option value="August">August</option>
        <option value="September">September</option>
        <option value="October">October</option>
        <option value="November">November</option>
        <option value="December">December</option>
    </select>
</div>
    <script type="text/javascript">
    $("#year").change(function () {
    var targID = $(this).val();
    $("div.style-sub-1").hide();
    $('#' + targID).show();

})

$("div.style-sub-1 select").change ( function () {
    $("div.style-sub-2").hide ();
    document.getElementById("test").setAttribute("id", targID);
    $('#' + targID).show ();
} )
    </script>
4

4 回答 4

2

请注意，您使用 jQuery 而不是document.getElementById("id")您可以简单地做$("#id")，而不是.setAttribute您可以做.attr('attr', 'attrVal')。

因为$("#test")将更改 id 的解决方案是更改select父级的 id。

// on change
    var $this = $(this);
    $this.parent().attr("id", $this.val());

但我建议您不要更改 id，而是使用data-attr.

<div id="test" data-value="test">...</div>

然后设置它：

$("#test").attr("data-value", $this.val());
于 2013-07-10T06:35:27.197 回答
0

targID此方法中没有变量。

$("div.style-sub-1 select").change ( function () {
    $("div.style-sub-2").hide ();
    document.getElementById("test").setAttribute("id", targID); //  error
    $('#' + targID).show ();
});

从您的代码来看，您似乎已经在使用 usingjQuery因此尝试一下

$('#test').prop("id","yourId");
于 2013-07-10T06:34:59.923 回答
0

我更新了你的 JsFiddle。我更改了您的 Javascript 以反映以下内容：

$("select#year").on('change', function () {
    var targID = $(this).val();
    $("div.style-sub-1").hide();
    $('#' + targID).show();
})

$("select#year").on('change', function () {
    var tarID  = $(this).val();
    $('#test').attr('id', tarID); // document.getElementById("test").setAttribute("id", targID);
    $("div.style-sub-2").hide ();
    $('#' + tarID).show ();
} )

但是，这不会更改更改test后的 ID。您必须创建一个函数来跟踪这一点，但这应该不会太难。

于 2013-07-10T06:36:28.860 回答
0

如果你真的想要纯 JavaScript 选项：

document.getElementById("test").id = "2013";

我还注意到：

$("div.style-sub-1 select").change ( function () {
    $("div.style-sub-2").hide ();
    document.getElementById("test").setAttribute("id", targID);
    $('#' + targID).show ();
} );

不会按原样在您的代码中触发。您的意思是在其他.change()功能中更改 ID 吗？

于 2013-07-10T06:40:12.727 回答