CODEWITHSUNDEEP
javascriptjqueryhtml
Divya Singh
Divya Singh

Reputation: 19

How to detect value when dropdown value changed

I am trying to get the value of the drop down whenever it changed . I already aware about onchange function that works only if we explicitly change the value of dropdown .

When Checkbox Checked it goes to selectChangeHandler function set any default value to dropdown at same time dropdown selected value should also alert make sure that it loaded from dropdown onchange function not from the selectChangeHandler . i am able to get dropdown value when i change explicitly by using onchange function but first time when i select checkbox what default value set which is not appearing from onchange function . .

Please help me to figure this out.

function selectChangeHandler() {
    //get option with value 3 and set selected
    $("#cityNames option[value=3]").prop('selected', 'selected');    
}

$(document).ready(function() {
    $("select").change(function() {
        alert("you have changed the value ");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- CheckBox start-->
Do you want to Select City ? <input type="checkbox" name="checkbox1" onclick = "selectChangeHandler()" />
 <!-- CheckBox end-->
</br></br>
 <!-- City DropDown Construction start-->
<select id="cityNames" class="selectChange">
    <option value="1" selected>USA</option>
    <option value="2">SA</option>
    <option value="3">INDIA</option>
    <option value="4">CANADA</option>
</select>
<!--City  DropDown Construction End -->
</br></br>

<!-- input text box which display value control has forwarded from dropdown -->
<input type="text" name="cityName" disabled><br>
<!-- input text box which display value control has forwarded from dropdown -->

please help me to figure this out

Upvotes: 0

Views: 7517

Answers (2)

bhansa
bhansa

Reputation: 7504

You can get the value while change this way

function selectChangeHandler() {
    //get option with value 3 and set selected
    $("#cityNames option[value=3]").prop('selected', 'selected');
}

$(document).ready(function() {
    $("#cityNames").change(function() {
        alert($(this).val());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- CheckBox start-->
Do you want to Select City ? <input type="checkbox" name="checkbox1" onclick = "selectChangeHandler()" />
 <!-- CheckBox end-->
</br></br>
 <!-- City DropDown Construction start-->
<select id="cityNames" class="selectChange">
    <option value="1" selected>USA</option>
    <option value="2">SA</option>
    <option value="3">INDIA</option>
    <option value="4">CANADA</option>
</select>
<!--City  DropDown Construction End -->

<br><br>

<!-- input text box which display value control has forwarded from dropdown -->
<input type="text" name="cityName" disabled><br>
<!-- input text box which display value control has forwarded from dropdown -->

Upvotes: 1

MUlferts
MUlferts

Reputation: 1330

There are lots of examples of this on other SO questions like this one: jQuery Get Selected Option From Dropdown. Here is an example that should work with your code:

function selectChangeHandler(){
    //get option with value 3 and set selected
    $("#cityNames option[value=3]").prop('selected', 'selected'); 

}

$(document).ready(function() {
    $("#checkbox1").change(function () {
        if ($(this).is(":checked")){
               selectChangeHandler();
        };
    });
    $("#cityNames").change(function () {
        var selectValue = $(this).val()
        alert("you have changed the value " + selectValue);
    });
});

I would highly recommend that you go through the jquery learning course at http://try.jquery.com/. It is a very great tutorial on jquery and it will help you get a good start for sure.

Upvotes: 1

Related Questions