How do you get value of select button?

Question

When clicking the select button, it doesn't enter in the function? Why is that? The console in the browser is empty.

HTML:

<select name="field_choice[]"
        id="field_choice_1"
        class="form-control field_choice">
    <option value="0" >Link</option>
    <option value="1">Text</option>
</select>

JS:

<script type="text/javascript">
    $(".field_choice").on("click",function(){
        console.log(1);
    });
</script>

Possible duplicate of [How can I get query string values in JavaScript?](https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) — Farhad Bagherlo, Sep 02 '17 at 19:31
It works for me... shows `1` every time you click the `select` element. Are you loading jQuery? — freginold, Sep 02 '17 at 19:32

score 1 · Answer 1 · answered Sep 02 '17 at 19:40

You can't forget to add jquery, I added so the script only runs when all the html has loaded and if you needed the value for when you clicked on it $(".field_choice").val()

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script type="text/javascript">
    $(document).load(function(){
        $(".field_choice").on("click",function(e){
            console.log($(".field_choice").val());
        });
    }
</script>

Arpit Solanki · Answer 2 · 2017-09-02T19:37:55.623

0

$(".field_choice").on("change",function(){
    console.log(1);
});

<select name="field_choice" id="field_choice_1" class="form-control field_choice">
    <option value="0" >Link</option>
    <option value="1">Text</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

It would be on change not on click.

edited Sep 02 '17 at 19:37

answered Sep 02 '17 at 19:28

Arpit Solanki

9,567
3
41
57

It should be rendered after window.onload – Arpit Solanki Sep 02 '17 at 19:31

score 0 · Answer 3 · answered Sep 02 '17 at 19:32

0

Place the script in the very bottom of you body.

Surround it with an onload function:

$(document).load(function(){
  $(".field_choice").on("change",function(){
        console.log(1);
  });

}

answered Sep 02 '17 at 19:32

Sletheren

2,435
11
25

Farhad Bagherlo · Answer 4 · 2017-09-02T19:39:13.487

0

$(document).ready(function(){
$(".field_choice").on("change",function(){
    console.log($(this).val());
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="field_choice[]" id="field_choice_1" class="form-control field_choice">
    <option value="0" >Link</option>
    <option value="1">Text</option>
</select>

edited Sep 02 '17 at 19:39

answered Sep 02 '17 at 19:32

Farhad Bagherlo

6,725
3
25
47

J. Brown · Answer 5 · 2017-09-02T19:40:18.363

I think you might need to wrap the jQuery commands between

$(function() {

and

});

This way you're always sure they get executed when all the DOM Elements (select, option, etc) are rendered (= exist). If the commands are executed before, the selector won't fiend any .field_count element, therefore will have no effect.

Every "DOM-editing" jQuery command should be wrapped inside an anonymous function like this!

score 0 · Answer 6 · answered Sep 02 '17 at 20:14

onclick :

The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements.

onchange :

The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus.

https://www.w3.org/TR/html4/interact/scripts.html

From what I can see you are looking to use onchange getting the value of the select list.

Your code works but, probably not how you intended

To get the value as per your HTML code, <option value="0" >Link</option> do as follows:

$(".field_choice").on("change",function(){
    console.log($(this).val());
});

https://jsfiddle.net/88yo1zcy/

To get the text value do as follows:

$(".field_choice").on("change",function(){
    console.log($('option:selected').text());
});

https://jsfiddle.net/r5dzvjqp/

How do you get value of select button?

6 Answers6