Javascript 有没有一种方法可以用基本的JSDOM实现这一点?
我需要在一个单独的下拉表单中根据用户的选择应用/删除输入字段,但我不知道如何定位输入的类 我需要在此输入中添加/删除“pageRequired”类:Javascript 有没有一种方法可以用基本的JSDOM实现这一点?,javascript,html,forms,Javascript,Html,Forms,我需要在一个单独的下拉表单中根据用户的选择应用/删除输入字段,但我不知道如何定位输入的类 我需要在此输入中添加/删除“pageRequired”类: <input type="text" title="Company Required" name="customfields-tf-2-tf" class="inputclass pageRequired textInput" id="customfields-tf-2-tf" /> 当用户从下拉字段中选择两个选项之一时。例如: &
<input type="text" title="Company Required" name="customfields-tf-2-tf" class="inputclass pageRequired textInput" id="customfields-tf-2-tf" />
当用户从下拉字段中选择两个选项之一时。例如:
<select class="dropdown" name="customfields-s-1-s" id="customfields-s-1-s" >
<option value="Owner"<?php if(in_array("Owner",$temp_values)) { ?> selected='selected'<?php } ?>> Owner</option>
<option value="Broker"<?php if(in_array("Broker",$temp_values)) { ?> selected='selected'<?php } ?>> Broker</option>
</select>
如果用户选择broker,则我希望将pageRequired类添加到第一个输入字段,如果用户选择Owner,则将其删除
编辑-好,下面是我正在使用的代码:
<script type="text/javascript">
function changeClass(myDropdown) {
if (#customfields-s-1-s.selectedIndex == 1 ) {
$('#customfields-tf-2-tf').addClass('pageRequired');
}
else {
$('#customfields-tf-2-tf').removeClass('pageRequired');
}
}
</script>
使用jquery可以非常简单地做到这一点: 只需将onchange事件添加到下拉列表中,然后调用一个函数,根据下拉列表选择移除或添加该类
<select class="dropdown" name="customfields-s-1-s" id="customfields-s-1-s" onchange="javascript:changeClass(this);" >
function changeClass(myDropdown) {
if (myDropdown.selectedIndex == 1 ) {
$('#customfields-tf-2-tf').addClass('pageRequired');
}
else {
$('#customfields-tf-2-tf').removeClass('pageRequired');
}
}
以下是有关使用的链接:
使用jquery可以非常简单地做到这一点: 只需将onchange事件添加到下拉列表中,然后调用一个函数,根据下拉列表选择移除或添加该类
<select class="dropdown" name="customfields-s-1-s" id="customfields-s-1-s" onchange="javascript:changeClass(this);" >
function changeClass(myDropdown) {
if (myDropdown.selectedIndex == 1 ) {
$('#customfields-tf-2-tf').addClass('pageRequired');
}
else {
$('#customfields-tf-2-tf').removeClass('pageRequired');
}
}
以下是有关使用的链接:
如果不想使用JQuery,也可以使用普通JavaScript:
<script>
function changeClass(obj) {
var input = document.getElementById("customfields-tf-2-tf");
if(obj.value == 'Broker') {
input.className = input.className.replace('pageRequired','');
}
else if(obj.value == 'Owner') {
input.className = input.className + ' pageRequired';
}
}
</script>
<input title="Company Required" id="customfields-tf-2-tf" class="inputclass pageRequired textInput" type="text">
<br>
<select name="matt" onchange="changeClass(this)">
<option value="Owner">Owner</option>
<option value="Broker">Broker</option>
</select>
如果不想使用JQuery,也可以使用普通JavaScript:
<script>
function changeClass(obj) {
var input = document.getElementById("customfields-tf-2-tf");
if(obj.value == 'Broker') {
input.className = input.className.replace('pageRequired','');
}
else if(obj.value == 'Owner') {
input.className = input.className + ' pageRequired';
}
}
</script>
<input title="Company Required" id="customfields-tf-2-tf" class="inputclass pageRequired textInput" type="text">
<br>
<select name="matt" onchange="changeClass(this)">
<option value="Owner">Owner</option>
<option value="Broker">Broker</option>
</select>
那么使用jquery我可以添加这样的类?我应用了多个类,这会影响它吗?多个类应该可以。查看使用中的链接有一个添加和删除多个类的示例。还有一个.toggleClass使其更短:$'customfields-tf-2-tf'。toggleClass'pageRequired',myDropdown.selectedIndex==1;我不能很好地让它工作,我是否正确地定位了下拉列表?我将我正在使用的代码添加到OP中。您是否将onchange添加到下拉列表中?因此,使用jquery,我可以添加这样的类?我应用了多个类,这会影响它吗?多个类应该可以。查看使用中的链接有一个添加和删除多个类的示例。还有一个.toggleClass使其更短:$'customfields-tf-2-tf'。toggleClass'pageRequired',myDropdown.selectedIndex==1;我不能很好地让它工作,我是否正确地定位了下拉列表?我将我正在使用的代码添加到OP中。您是否将onchange添加到下拉列表中?