How to detect value when dropdown value changed

Question

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

see my code and question link below and let me know if you have questions. — MUlferts, Sep 16 '17 at 17:48
Please edit your question, its unclear what you are asking also please check the solutions below. — bhansa, Sep 16 '17 at 18:36

MUlferts · Answer 1 · 2017-09-16T18:32:37.823

1

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.

edited Sep 16 '17 at 18:32

answered Sep 16 '17 at 17:48

MUlferts

1,310
2
16
30

@Mihael : Thanks for help but what if first time when checkbox checked then alert box is not appearing – Divya Singh Sep 16 '17 at 17:50
You want to only show the alert when a checkbox is checked? – MUlferts Sep 16 '17 at 17:53
Yes . whenever checkbox checked what value is selected that also i want to display – Divya Singh Sep 16 '17 at 17:54
So you want to add a listener to the checkbox and show whether it is checked or not when it is checked and unchecked? Or do you want the selected value of the dropdownlist to only show an alert when that checkbox is checked? Just trying to clarify – MUlferts Sep 16 '17 at 17:56
i want the selected value of the dropdownlist to only show an alert when that checkbox is check – Divya Singh Sep 16 '17 at 17:57
I added a check for whether the checkbox is check in the dropdownlist change function. So if the checkbox in not checked, then no alert will show. – MUlferts Sep 16 '17 at 18:05
:Thanks but my question is can we get alert when first time dropdown set when checkbox is checked i mean as per your current code it will only work when you explicitly change the dropdown value right . let's take example on check checkbox i want to get selected dropdown value which is set from selectChangeHandler () function . – Divya Singh Sep 16 '17 at 18:10
Ok, so really you would want to just have a change event function on the checkbox, and show the selected value of the dropdown when the checkbox is checked true. Is that right? – MUlferts Sep 16 '17 at 18:14
Yes But make sure that i want to get the dropdown value from dropdown onchange function only not from checkbox change function . i mean when i check checkbox it should only load the dropdown nothing else . whereas dropdown function is responsible to send alert like you have selected this value at the same time . conclusion is when check box checked dropdown loaded and dropdown change function detect the changes the alert the value – Divya Singh Sep 16 '17 at 18:19
1

I guess i still dont fully understand what you want to happen here. Could you edit your question and add a list of what you want to happen? – MUlferts Sep 16 '17 at 18:29
There nothing to understand in the question, its pretty vague. – bhansa Sep 16 '17 at 18:57
@bhansa Edited the question . Sorry for that – Divya Singh Sep 17 '17 at 03:06

score 1 · Answer 2 · edited Sep 16 '17 at 18:45

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 -->

How to detect value when dropdown value changed

2 Answers2