CODEWITHSUNDEEP
javascriptjquery
Prakash Kumar Guru
Prakash Kumar Guru

Reputation: 103

Dynamically disable the select field condition is if we change another select field

<div class="radio">
    <input type="radio" id="test2" name="specific_content" value="2">
    <label for="test2" class="parent_row">
        <div class="col-md-4">
            <select class="form-control" name="content_form[]">
                <option value="" selected disabled hidden>Select</option>
                <option value="category">Category</option>
                <option value="genre">Genre</option>
                <option value="cast">Cast</option>
            </select>
        </div>
        <div class="col-md-4">
            <div class="select-btn">
                <select name="content_type[]" multiple class="form-control">
                </select>
            </div>
        </div>
        <div class="col-md-4">
            <select class="form-control condition-section" name="conditions[]">
                <option value="" selected disabled hidden>Select</option>
                <option value="1">AND</option>
                <option value="2">OR</option>
            </select>
        </div>
    </label>
</div>

Jquery

    $(document).on('change', "select[name='conditions[]']",  function(e){ 
        if($(this).val() != null && $(this).val() != "Select" && $(this).val() != "") {

        var selectedCat = [];
        $("select[name='content_form[]']").each(function(e){   
            if($(this).val()) {
                selectedCat.push($(this).val()); 
            }                             
        }); 

        //alert(JSON.stringify(selectedCat));

        var row = '<label class="parent_row">';
        row += '<div class="col-md-4">';
        row += '<select class="form-control" name="content_form[]">';
        row += '<option value="" selected disabled hidden>Select</option>';

        var unselectedCatPresent = false;
        if(selectedCat.indexOf('category') == -1) {
            row += '<option value="category">Category</option>';
            unselectedCatPresent = true;
        }
        if(selectedCat.indexOf('genre') == -1) {
            row += '<option value="genre">Genre</option>';
            unselectedCatPresent = true;
        }
        if(selectedCat.indexOf('cast') == -1) {
            row += '<option value="cast">Cast</option>';
            unselectedCatPresent = true;
        }   

        row += '</select>';
        row += '</div>';
        row += '</label>';

        if(unselectedCatPresent) {
            $(this).closest('label.parent_row').after(row);  
        }            
    } else if($(this).val() == "") {
        $(this).closest('label.parent_row').nextAll().remove();  
    }
});

The above is my HTML and jQuery code.

While changing the AND/OR dropdown, I am creating a new row having the all 3 select field and condition is there shouldn't be the first dropdown value.

That means if I already Category selected then I can't select Category again in the newly created section. I want to disable the same drop down field if AND/OR selected.

Please look at the below image for more details.

enter image description here

As you can see in the above image there is two section having 3 drop down each. My requirement is that in the first section, if AND/OR selected, then we can't choose from first drop down (in image Category present). But We can choose from 2nd section (in image Genre present), as in the 3rd dropdown Select field is present AND/OR option not selected. Once we selected AND/OR, we need to make read only option for the first select field for that particular row. Could anyone please help me on this? Also, note dropdowns are coming dynamically.

Upvotes: 1

Views: 133

Answers (1)

Amit Chauhan
Amit Chauhan

Reputation: 232

It seems you don't want the same value to be selected in the first combo of newly created row of two combo...I would suggest that while generating the select field dynamically don't add options which are already selected in previous combos....For that you need to maintain the list of already selected values

Upvotes: 1

Related Questions