is there a way to dynamically change the value and display of a select tag in javascript?

Question

Here is my Javascript inside of my html file:

<script>
                    $(document).ready(function(){
                        $("#sub").click(function(){
                            var user_issue = $("#issue").val();
                            var user_priority = $("#priority").val();
                            var user_type = $("#type1").val();
                            $.post("BugReport.php",{issue:user_issue,priority:user_priority,type1:user_type},function(data){
                                $("#result").html(data);
                                //location.reload(true);
                            });
                            $.post('BugDisplay.php',{},function(data){
                                $("#BugDisplay").html(data);
                            });
                            document.getElementById('issue').value='';
                            document.getElementById('type1').value='Listing Discrepancy';  //this is my attempt at solving the problem.
                        });
                        $.post('BugDisplay.php',{},function(data){
                                $("#BugDisplay").html(data);
                            });
                    });
                </script>

Here is my html:

<select name = "type1" id = "type1">
                <option value = "Listing Discrepancy">Listing Discrepancy</option>
                <option value = "PO Discrepancy">PO Discrepancy</option>
                <option value = "Pricing Discrepancy">Pricing Discrepancy</option>
                <option value = "Program Glitch">Program Glitch</option>
                <option value = "Receiving Discrepancy">Receiving Discrepancy</option>
                <option value = "RMA Discrepancy">RMA Discrepancy</option>
                <option value = "Sales Discrepancy">Sales Discrepancy</option>
                <option value = "Shipping Discrepancy">Shipping Discrepancy</option>
            </select>

What i want to do is on a click change the select statement so that it resets back to the default display of "Listing Discrepency" and also assign the value to "Listing Discrepency".

Do not judge him because he asks basic questions. Everybody is a beginner in the beginning. :) — Altay Mazlum, Jul 07 '15 at 18:02

aleksandar · Answer 1 · 2015-07-07T18:12:19.387

3

You just need to change the selectedIndex property of the select to the first 0 item.

HTML:

<button class="reset">Reset</button>

jQuery:

$(".reset").click(function () {
    $('#type1').prop('selectedIndex', 0);
});

Or just pure JavaScript:

document.getElementById("type1").selectedIndex = "0";

Working example.

edited Jul 07 '15 at 18:12

answered Jul 07 '15 at 18:02

aleksandar

2,399
2
14
22

In this case, how is it different than document.getElementById('type1').value='Listing Discrepancy';? – A. Wolff Jul 07 '15 at 18:04
You don't need to write `Listing Discrepancy` (the exact value) – aleksandar Jul 07 '15 at 18:10
thanks that worked perfectly. I had already created the button though. – lazersquids mcgee Jul 07 '15 at 18:11

andrew · Answer 2 · 2015-07-07T18:06:10.947

0

It could be achieved with

$("#type1").val('Listing Discrepancy');

in your onclick event callback

example

edited Jul 07 '15 at 18:06

answered Jul 07 '15 at 18:03

andrew

9,313
7
30
61

How is it different than `document.getElementById('type1').value='Listing Discrepancy';`? – A. Wolff Jul 07 '15 at 18:04
Ahh yes, i missed that, It works ok though, see example – andrew Jul 07 '15 at 18:07

score 0 · Answer 3 · answered Jul 07 '15 at 18:08

0

Add this code after select tag

<button onClick="$('#type1').val('Listing Discrepancy');">Reset</button>

answered Jul 07 '15 at 18:08

waders group

538
3
7

is there a way to dynamically change the value and display of a select tag in javascript?

3 Answers3