[英]Change DIV id with javascript
尝试将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>
请注意,您可以使用jQuery而不是document.getElementById("id")
来简单地执行$("#id")
,而不是.setAttribute
来执行.attr('attr', 'attrVal')
。
因为$("#test")
的ID将被更改,所以一种解决方案是更改select
父对象的ID。
// on change
var $this = $(this);
$this.parent().attr("id", $this.val());
但是,我建议您使用data-attr
而不是更改id。
<div id="test" data-value="test">...</div>
然后进行设置:
$("#test").attr("data-value", $this.val());
targID
此方法中没有变量。
$("div.style-sub-1 select").change ( function () {
$("div.style-sub-2").hide ();
document.getElementById("test").setAttribute("id", targID); // error
$('#' + targID).show ();
});
从您的代码来看,您似乎已经在使用jQuery
因此请尝试使用
$('#test').prop("id","yourId");
我更新了您的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后更改它。 您必须创建一个函数来跟踪此情况,但这应该不太困难。
如果您真的想要纯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?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.