Question

Is this case possible using JavaScript or jQuery?

When the value of the select box with class cl_preAction is set to the option of ‘003’ "End of World", the options in the select box "cl_prePRRS" 01,02,03 should be removed or grayed out (not possible to select – if this is possible)

Note that this pattern will repeat several times on a page, so using the same id will not work.

$('.cl_preAction').live('change', function (){  
     if ($(this).val() =='003'){
     $(this).parent().parent()...
});



<tr>
    <td>Action</td>
    <td class='none'>
       <div data-role='fieldcontain' class='none'>
        <select name='ACTC' class='none cl_preAction'   data-theme='a'>
            <option data-location='S' value='001'>Fire</option>
            <option data-location='T' value='002'>Flood</option>
            <option data-location='T' value='003'>End Of World</option>
        </select>
       </div>
    </td>
</tr>
<tr>
    <td>Reason</td>
    <td class='none'>
        <div data-role='fieldcontain' class='none'>
            <select name='PRRS' class='none cl_prePRRS'   data-theme='a'>
                <option value='01'>Rebuild</option>
                <option value='02'>Relocate</option>
                <option value='03'>Cash Payment</option>
                <option value='04'>Send registered letter indicating this event is not covered</option>
                    </select>
        </div>
    </td>
</tr>
 

Answer 1

Your first issue will be that disabling select options doesn’t work reliably across all browsers and versions. Your best bet is to remove the options you don’t want but you could also create something that forces the user to select another option when required.

You’re also going to have a problem with different rules for each of the select box pairings. Unless when you select option 3 in the ‘control’ select box it always blanks out options 1,2,3 of the target select box.

I would use a ‘data’ attribute…

    <select name='ACTC' class='none cl_preAction' data-theme='a' data-target-select="cl_prePRRS">

    $('.cl_preAction').live('change', function (){  
        var me = $(this);
        if (me.val() =='003') {
            $("."+me.attr("data-target-select")).filter(function() {
                return ($(this).val() != '03');  // I think you really want 04 here.
            }).remove();
        }
   });

Don’t go down the road of trying to jump through the DOM unless you really have to. It’s convoluted and heaven forbid you’d ever need to move a select box or change the page structure.

You’ll notice that this solution will only remove the options that aren’t = ’03’ in the target select box. You could easily add another “data” attribute that will allow you to pass in a list of options that should be kept and/or should be removed. You could do this by index of the options but that would be a little less flexible and harder to figure out.