[英]How to only run a JQuery function if a certain field is chosen in a drop down
Ok I have a pretty generic state drop down. 好吧,我有一个相当普通的状态下拉列表。
<select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required required" id="stateid" name="State"><option value="">---</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
What I want to do is run a JQuery script ONLY if a certain value is selected from the drop down. 我想做的是仅在从下拉列表中选择某个值的情况下运行JQuery脚本。
This is the code I have so far, but it's not working 这是我到目前为止的代码,但是没有用
if(#stateid.wpcf7-form-control=='AL') {
jQuery(function($){
$("input[name=phone]").mask("(999) 999-9999? ext.99999");
})
};
Anyone care to help as why it's not working? 有人在乎为什么不起作用需要帮助?
You need to put the condition in the event handler instead of putting event handler in condition. 您需要将条件放入事件处理程序中,而不是将事件处理程序放入条件中。
jQuery(function($){
$('#stateid').click(function(){
if($(this).val() =='AL') {
$("input[name=phone]").mask("(999) 999-9999? ext.99999");
}
});
});
Here is the syntax for click event handler. 这是单击事件处理程序的语法。
$("selector").click(function() {
//You code here, your condition
});
You can learn more about selectors here ; 您可以在此处了解有关选择器的更多信息;
Why is it not working? 为什么不起作用?
Where did you learn about #stateid.wpcf7-form-control
? 您从哪里学到的
#stateid.wpcf7-form-control
? That is a syntax error. 那是语法错误。
Select an element 选择一个元素
var select = $("#stateid.wpcf7-form-control");
add onchange event 添加onchange事件
select.on("change", function(){
});
get the value 获得价值
select.val();
If you only want the mask to be applied when one particular option is selected and not for the other options then you may also need a way to clear the mask if a user selects an option not equal to AL
afterwards. 如果只希望在选择一个特定选项时才应用该掩码,而不希望在其他选项中应用该掩码,那么如果用户随后选择的选项不等于
AL
,则可能还需要一种清除掩码的方法。
You could use a function triggered off the the JavaScript .blur()
event to execute the logic of whether to set or clear the mask on the input. 您可以使用JavaScript
.blur()
事件触发的函数来执行是否在输入上设置或清除掩码的逻辑。
$(function() {
$('#stateid').on('blur', function() { // hook in your custom function onto the element with id = stateid
if (this.options[this.selectedIndex].value === 'AL') { // check which option is selected
// set mask
} else {
// clear mask
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.