javascript - 将 jQuery 代码转换为 Javascript

标签 javascript jquery drop-down-menu html-select html-input

我对 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 吗?

最佳答案

如果我理解你代码的意图,你可以这样做。唯一遗漏的是隐藏/显示动画,就像使用 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/

关于javascript - 将 jQuery 代码转换为 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9526085/

相关文章:

jquery - 如何将 primefaces 按钮悬停效果添加到 html 按钮

javascript - 我如何获取文本而不是值

jquery - 具有多个选择的语义 ui 下拉菜单在选择一个选项后不清除文本

jquery - 对象不支持属性或方法 'selectbox'

Javascript InnerHTML 输出错误

javascript - 为什么这段 JavaScript 代码没有执行?

javascript - 滚动时停止 Effect.ScrollTo()?

javascript - jQuery 3 slim ajax 基本示例

javascript - JS改变高度并返回原始CSS高度

jquery - twitter bootstrap 下拉菜单在应该关闭时没有切换