I think this would do the trick. It gets the currently relevant SELECT and gets its value:
$('#cf_proposed_cable_route').change(function() {
var text = $(this).val();
console.log(text);
$('input[name=building_post_2000]').prop("disabled", text === 'Internal');
});
- i think that you don’t need to
select
event you just need to change
event when you select one option the value of select tag will be change to be the same value of selected option
For Example
<select>
<option value="0">Select car:</option>
<option value="1">Audi:</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
</select>
JS Validation
var sel = $("select");
sel.change(function () {
var opt = $("select option:checked")
if(opt.text() === "BMW") {
console.log(opt.text())
}
});
Example
var sel = $("select");
sel.change(function () {
for(var i = $("option").length; i >= 1; i--) {
if($(this).val() === $("option:nth-child("+i+")").val()) {
if($("option:nth-child("+i+")").text() === "BMW") {
console.log($("option:nth-child("+i+")").text())
}
}
}
});
I would like to validate my select
option list in HTML.
The full code is available here:
https://jsfiddle.net/crgfp8ud/
Where I want to distinguish the one option, which will make the other query below active.
I found a couple of solutions:
Jquery Conditional validation based on select text
https://www.py4u.net/discuss/962973
from where I’ve picked up the code and tried to adapt it for my purposes. Unfortunately they didn’t work properly:
$(document).ready(function(){
$('input[name=proposed_cable_route]').validate({
rules: {
cname: { required: true },
select1: { valueNotEquals: "0" },
other: { required: function(element){
return $("#cf_proposed_cable_route option:selected").text() == "Internal";
}
}
}
});
and the other one
/*
$('select').change(function() {
var text = $('select option:selected').text();
if(text == 'Internal') {
$('input[name=building_post_2000]').attr('disabled', true);
}
});
*/
the last one tried was:
$("input[name=proposed_cable_route]").on('select', function() {
var blockNumber = $('#cf_building_post_2000');
// if is company
if ($(this).val() == "Internal") {
// show panel
blockNumber.show();
// remove disabled prop
blockNumber.find('input,select,radio').prop('disabled', false);
} else {
// if is not company, hide the panel and
add disabled prop
//blockNumber.hide();
blockNumber.find("input").val("");
blockNumber.find('input,select,radio').prop('disabled', true);
}
});
Is there any way to make the validation based on the select
option value
?
how many drop downs do you have on the screen … var text = $(‘select option:selected’).text(); … this doesn’t capture the relevant one…it just gets the first one
changed attr to prop…note that the selector should be changed if you have more than one SELECT on the page
It doesn’t work. I think the question id is missing here.
I used something like this: $(‘#cf_proposed_cable_route:select’).change(function() { but still with no result