Question

当用户使用onBlur退出下拉选择框时，我尝试调用函数，但我无法使其工作。这是代码。

    <div class="row">
<label for="CountyTab" Id="CountyText" onMouseOver=style.color="#0050FF" onMouseOut=style.color="#C0C0C0"><div class="left label">
County:</div></label><div class="left content">
<select>
           <option value="">Choose one</option>
           <option value="Antrim">Antrim</option>
           <option value="Westmeath">Westmeath</option>
           <option value="Wexford">Wexford</option>
           <option value="Wicklow">Wicklow</option> id="CountyTab" onblur="countyCheck()"  
</select><div style="clear: both"></div></br>

Answer 1

这里有一些事情。首先，正如@David所说，你的HTML似乎格格不入。尽量不要使用内联Javascript和CSS。这对您的应用程序/网站永远不会有好处。使用以下HTML作为指南：

<div class="row clearfix">
    <label for="CountyTab" class="label">County: </label>
    <select id="CountyTab">
       <option value="">Choose one</option>
       <option value="Antrim">Antrim</option>
       <option value="Westmeath">Westmeath</option>
       <option value="Wexford">Wexford</option>
       <option value="Wicklow">Wicklow</option> 
    </select>
</div>

对于HTML的第二位，请尝试不使用其他元素进行clearfix。我们有纯粹的CSS技巧来处理清除浮动。其他元素不适合语义。

label { color: #c0c0c0; }
label:hover { color: #0050ff; }

.row { padding-left: 26%; position: relative; }
.row .label { left: 0; position: absolute; width: 25%; }

/* Add the class "clearfix" to any element in your HTML is equal to adding <div style="clear: both;"></div> below that element */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

现在回答你原来的问题，正如@adeneo所说，使用change事件。请参阅以下代码：

document.getElementById("CountyTab").onchange = function(evt) {
    alert(evt.target.value);
}

上面将change事件附加到ID为“CountyTab”的元素。只要该元素的值发生更改，就会触发该事件。然后调用该语句右侧的函数，该函数将事件作为参数。该特定代码将提醒select元素的选定值。

请参阅jsfiddle以了解上述所有操作：http://jsfiddle.net/ninty9notout/UNL9D/

函数调用退出选择框

1 个答案: