Javascript HTML select dropdown

Question

I am trying to get the data from database and display it in select option through drop down menu. I am getting the data correctly in java script page as well. But it is not displaying in the drop down menu of html.

HTML code:

<td>Organization Name:</td>
<td>
    <select id="orgname" name="Oname" onload="getOrganizationname();">
        <option selected disabled value=" ">Choose your Organization</option>

        <!-- <option value="1" >xyz</option>
        <option value="2">Brocade</option>
        <option value="3">Citrix</option> --> 
    </select>
</td>

Javascript code: function getOrganizationname() {

$.get('getOrganizationname.jsp',function(data)
{
    document.getElementById("orgname").innerHTML= data;
        alert(data);
    }
    );
}

Onload I am getting this in alert msg(trying to debug)

This is the information from the database:

<option value="Infosys"></option>
<option value="Akamai"></option>
<option value="Brocade"></option>
<option value="XYZ"></option>
<option value="XYZ1"></option>
<option value="XYZ2"></option>

onload i am getting this in alert msg(trying to debug) This is info. from database: <option value="Infosys"></option> <option value="Akamai"></option> <option value="Brocade"></option> <option value="XYZ"></option> <option value="XYZ1"></option> <option value="XYZ2"></option> — user1955409
– user1955409, Commented Mar 2, 2017 at 10:18
So watever data i am getting as value, I want to it to be between the option like : <option value="Infosys">Infosys</option>....... like this — user1955409
– user1955409, Commented Mar 2, 2017 at 10:20
You're use of $.get would appear to be jQuery. Is this correct? If so, I'll tag your question as such... — War10ck
– War10ck, Commented Mar 3, 2017 at 21:11

Kevin · Accepted Answer · 2017-03-02 12:34:56Z

1

You use use:

$(document).ready(function(){
    $.get('getOrganizationname.jsp',function(data){
        $("#orgname").html(data);
    });
})

So your code now becomes:

<td>Organization Name:</td>
<td>
    <select id="orgname" name="Oname">
        <option selected disabled value=" ">Choose your Organization</option>
    </select>
</td>
<script>
$(document).ready(function(){
    $.get('getOrganizationname.jsp',function(data){
        $("#orgname").html(data);
    });
});
</script>

edited Mar 2, 2017 at 12:34

Kevin

1,7631 gold badge22 silver badges39 bronze badges

answered Mar 2, 2017 at 10:14

Shakti Phartiyal

6,3043 gold badges29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mycolaos · Accepted Answer · 2017-03-03 21:44:28Z

After you got data and set it, does your html looks like this? http://codepen.io/anon/pen/ryLaxV

If yes, the problem is that you haven't text inside your options.

<option value="Infosys"></option>

should become

<option value="Infosys">Infosys</option>

How to?

var jData = $(data) // create jquery wrapped dom elements

// now iterate them and add text from values
jData.each(function () {
  var currentElement = $(this) // that's jquery way...
  var value = currentElement.val()
  currentElement.text(value)
})
// finally append it to the select element
$('#orgname').html(jData)

Also, consider the suggestion of using $(document).ready by Shakti Phartiyal.

And please, use console.log(data) for debug. To see the console - right mouse click on your page --> inspect element.

P.S. it would be much better, if you got raw data from server, I mean a json or something like that! :)

Collectives™ on Stack Overflow

Javascript HTML select dropdown

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related