我是Javascript和jQuery的新手。我正在尝试实现一个下拉选择框,当选择某些项时,将禁用输入文本框。我能够通过从各种StackOverFlow问题中混淆一些jQuery来实现:
<select name="Severity-of-your-symptoms" id="Severity-of-your-symptoms" class="cformselect" >
<option value="full01_severity_notselected" selected="selected">Please select...</option>
<option value="full01_severity_other">Mild</option>
<option value="full01_severity_other">Moderate</option>
<option value="Severe">Severe</option>
<option value="full01_severity_other">Other</option>
</select>
<br />
<input type="text" id="li-10-14" />
<input type="text" name="firstname" title="First Name" style="color:#888;"
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" id='color'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>
<script type="text/javascript">
$('#Severity-of-your-symptoms').change(function() {
$("#li-10-14")[$(this).val() == "full01_severity_other" ? 'show' : 'hide']("fast");
}).change();
$('#Severity-of-your-symptoms').change(function() {
$("#li-10-14")[$(this).val() == "full01_severity_other" ? $('#color').attr("disabled", true)
: $('#color').attr("disabled", false)]
}).change();
</script>
我真的想在Javascript中实现这个,但是只能使用jQuery,任何人都可以帮助我将其转换为纯Javascript吗?
答案 0 :(得分:2)
如果我理解您的代码的意图,您可以这样做。唯一遗漏的是隐藏/显示动画,就像你使用jQuery一样。
// this code should be located after the rest of the HTML at the end of the <body> tag
function checkSeverity() {
var displayVal, disabledVal;
if (document.getElementById("Severity-of-your-symptoms").value == "full01_severity_other") {
displayVal = "inline";
disabledVal = true;
} else {
displayVal = "none";
disabledVal = false;
}
document.getElementById("li-10-14").style.display = displayVal;
document.getElementById("color").disabled = disabledVal;
}
// hook up the event handler
document.getElementById("Severity-of-your-symptoms").onchange = checkSeverity;
// call it initially to establish the initial state
checkSeverity();
您可以在此处查看:http://jsfiddle.net/jfriend00/3xGxp/
答案 1 :(得分:1)
取点:
$('#Severity-of-your-symptoms')
$ function创建一个“jQuery对象”,它是一个包含其他方法的数组。数组的成员是选择器选择的元素。在这种情况下,它使用ID,因此只选择一个元素。它可以替换为:
var element = document.getElementById('severity-of-your-symptoms');
.change(function(){...})
这会调用jQuery对象的方法,将 onchange 侦听器添加到元素,当元素收到 change 事件时将调用该元素。如果您只需要一个更改侦听器,则可以将其附加到onchange属性:
element.onchange = function(){...};
但元素可能为null,所以更好:
if (element) element.onchange = function(){...};
要从函数中删除jQuery位,如果您只是希望元素出现并消失,那么:
function() {
var element = document.getElementById('li-10-14');
if (this.value == "full01_severity_other") {
element.style.display = element.style.display == 'none'? '' : 'none';
}
}
如果你想要淡入/淡出或向上/向下滑动效果,可以使用非常简单的库来实现这些效果。
最后有:
.change();
你可以把整个事情写成一个单独的陈述,但我认为将它作为单独的陈述保持得更加健壮。转换其他部分大致相同。