I am trying to fillup textbox value when user select the value from the dropdownlist

but issue is my dropdownlist is coming when click on apply link

see below image when I click the apply button then open bootstrap model

I write the code for change the value of dropdownlist an fillup that value in another textbox

.cshtml

```
          <div class="row">
                            <div class="col-md-2">
                                <label>Vacancy:</label>
                            </div>
                            <div class="col-md-8">
                                <select id="hm" class="form-control">

                                    @foreach (var item in @ViewBag.vacancy)
                                    {
                                        <option value="item.vacancytitle">
                                            @item.vacancytitle
                                        </option>
                                    }
                                </select>

                            </div>
                        </div>

                        <br />

                        <div class="row">
                            <div class="col-md-2">
                                <label>vacancyid:</label>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" type="text" id="vacancyid" value="" />
                            </div>
                        </div>
                        <br />
          <div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

 $('#applylink').click(function () {

        debugger

        //var h = document.getElementById(hm).value;
        //var strUser = h.options[e.selectedIndex].value;
        //$('#vacancyid').val(strUser);

        $("#myModal").modal();  //here open bootstrap modal

        $('#hm').on('change', function () {
            var selectVal = $("#selectId option:selected").val();
            $('#vacancyid').val(selectVal);    //here I am trying to fetch value from dropdownlist when user select the particular value from the dropdownlist
        });

    });

</script>

```

currently I have two value in dropdownlist

```
html/css developer
angular,js developer

```

when user select `html/css developer` from the dropdownlist then here I am filling

```
 $('#vacancyid').val(selectVal);  

```

html/css developer

first click the apply link button and then open bootstrap modal

I want to fillup textbox value when user select the value from the dropdownlist

[![enter image description here](https://i.stack.imgur.com/sszZW.png)](https://i.stack.imgur.com/sszZW.png)

when open the popup then I want to call this method

```
$('#hm').on('change', function () {
            var selectVal = $("#selectId option:selected").val();
            $('#vacancyid').val(selectVal);    //here I am trying to fetch value from dropdownlist when user select the particular value from the dropdownlist
        });

```

Edit:

```
        //load javascript after modal is loaded
        //load option value chage after modal is loaded
        $(document).ready(function () {
            debugger
            $('#myModal').on('load', function () {
                debugger
                $('#hm').on('change', function () {   //debugger here not come when select the value from the dropdownlist
                    debugger
                    var selectVal = $("#selectId option:selected").val();
                    $('#vacancyid').val(selectVal);
                });
            });
        });

```