Solution 1 :

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');
});

Solution 2 :

  • 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())
  }
});
  • or you can create a loop

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())
       }
    }
  }
});

Problem :

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?

Comments

Comment posted by Ctznkane525

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

Comment posted by MKR

I have got 3 dropdowns

Comment posted by Ctznkane525

changed attr to prop…note that the selector should be changed if you have more than one SELECT on the page

Comment posted by MKR

It doesn’t work. I think the question id is missing here.

Comment posted by MKR

I used something like this: $(‘#cf_proposed_cable_route:select’).change(function() { but still with no result

Comment posted by Ctznkane525

@MKR – fixed with val and the id..please check updates

By