I cannot get the value of CHtml::dropDownList with Javascript

Issue

I am new to PHP and Javascript and I have an issue with the following problem. Here is my html/php:

<div class="row" style="margin-bottom:10px;">
                <div class="col-md-12">
                  <?php echo CHtml::dropDownList('contact_list','',
                  (array)Driver::contactDropList( Driver::getUserId())
                  ,array(
                  'class'=>"contact_list chosen"
                  ))?>
                </div>
            </div>

I am trying to reset this field when a button Cancel is clicked. By reset I mean to make it with value Select from contacts (it is the first option in the dropdown). Here is and my Javascript code, which is not working properly. It only closes the form, but without refresh of the page the dropdown value is there and it is not changed to the default one:

        $( document ).on( "click", ".close-modal", function() {     
            var elements = $('.contact_list');
            elements.select = 'Select from contacts';
            var id=$(this).data("id");
            $(id).modal('hide');
        });

I also tried to reset the whole form with $("#frm").reset(); method, but there was no desired result, too.

Now, it is appearing the previous value, which the user have chosen.

Solution

$('.contact_list option:first-child').attr("selected", "selected");

Try this

You can also try the following code:

$(".contact_list").prop("selectedIndex",0);

Note: This option will select the first option of dropdown. Make sure to make "Select your contact" first option

Answered By - Muhammad Mutti Ur Rehman