CODEWITHSUNDEEP
javascriptjqueryhtml
Mr.M
Mr.M

Reputation: 1480

jquery clone with HTML drop down option two drop down select the same value an alert should select different value

Currently working on jquery clone where user click add it will clone the div perfectly but I have dropdown. If user select cellphone in drop down and in other dropdown if user select the same cellphone it should duplicate found and the dropdown value has to clear.

 $('.slt_major select option:selected').each(function(i, e) {
 alert("check");
    //Check if values match AND if not default AND not match changed item to self
    if ($(e).val() == cI.val() && $(e).val() != 0 && $(e).parent().index() != cI.index()) {

        alert('Duplicate found!');
        cI.val('0');
    }
});

I was not able to see where the error was even the alert was not generating. Here is the fiddle link.

Thanks.

Upvotes: 0

Views: 1335

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

So here it is: DEMO

First I would like to correct your adding part since you were adding duplicate ids into internal elements of cloned row. So just change your code as below and check for inline comments.

$(document).on("click", ".btn_more", function () { 
        var $clone = $('.cloned-row:eq(0)').clone();
        $clone.find('[id]').each(function(){
            this.id=this.id +(count) //change the id of each element by adding count to it
        });
        $clone.find('.btn_more').after("<input type='button' class='btn_less1 phn_del' value='Del' id='buttonless"+count+"'/>")
        $clone.attr('id', "added"+(count)); //just append count here
        $clone.find('.preferred').attr('checked', false);
        $clone.find('.sslt_Field').val(0);
        $clone.find('.txt_CC').val('');
        $clone.find('.txt_Pno').val('');
        $(this).parents('.em_pho').after($clone);
        count++; //increment count at the end.
});

Now to check for duplicate options you can do it as below. Also check inline comments:

//attach event handler to document since you need event delegation on dynamically created elements
//attach change event to class 'sslt_Field'
$(document).on('change','select.sslt_Field',function(event) {
    var cI = $(this); //store a reference
    var others=$('select.sslt_Field').not(cI);
    //store reference to other select elements except the selected one

    $.each(others,function(){
       //iterate through remaining selects 
       if($(cI).val()==$(this).val() && $(cI).val()!="")//check if value has been 
       //already selected on other select
       {
           $(cI).val('');//empty the value
           alert('already selected');//display alert.
       }
    });
});

Upvotes: 2

Related Questions