1

I have 3 nested dropdown menus which are dynamically populated from a mysql database and I use Jquery. I want to set a selected value, depending on the entry in my database. For example:

I have a table that contains many devices. Each device has its storage place (room, shelve, box). Notice: different rooms contain different shelves which contain different boxes, thats why I use a nested dropdown menu. Next to each device is a button "change".

What I want is that the current storage place of the device is already selected in my dropdown menu.

This is part of my JS functions (got them from another site, I'm very new to JS):

function populateComp(xmlindata) {

var mySelect = $('#manufacturer');
 $('#printertype').disabled = false;
$(xmlindata).find("Company").each(function()
  {
  optionValue=$(this).find("id").text();
  optionText =$(this).find("name").text();
   mySelect.append($('<option></option>').val(optionValue).html(optionText)); 
  });
}

This is my html code:

Raum:</br></br><select name="manufacturer" id="manufacturer" >
    <option value="">Auswahl:</option></select>&nbsp;</br></br>
    Regal:</br></br> <select name="printertype" id="printertype" disabled="disabled" >
    <option value="">Auswahl:</option></select>&nbsp;</br></br>
    Kiste:</br></br><select name="printermodel" id="printermodel" disabled="disabled" >
    <option value="">Auswahl:</option></select></br></br>
<div id="loading" style="display: none;"></div>
<div id="output" ></div>

Part of my ajax code:

jQuery().ready(function($){

$('#loading')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;
// Ajax Called When Page is Load/Ready (Load Manufacturer)
jQuery.ajax({
       url: 'man_list.php',
       global: false,
       type: "POST",
       dataType: "xml",
       async: false, 
       success: populateComp
    });

Sorry for that much code, I hope anyone has a good solution for me, which I (the JS noob) can understand :)

jojojojo
  • 71
  • 1
  • 6
  • 1
    please post only the relevant parts of your code – nicholaswmin Apr 23 '15 at 08:26
  • IMO it all belongs together and since I don't know where to start, I thought it might be easier to help when you have more code.. – jojojojo Apr 23 '15 at 08:28
  • it's not at all..reproduce your problem with the minimal code - This is far too much - your example can be reproduced with not more than 7 lines of code - make it such – nicholaswmin Apr 23 '15 at 08:28
  • are you searching for [this](http://stackoverflow.com/questions/13343566/set-select-option-selected-by-value) – Orifjon Apr 23 '15 at 08:29
  • 1
    @ Orifjon no but thx^^ @ Nicholas Kyriakides ok I hope thats short enough – jojojojo Apr 23 '15 at 08:37
  • So from what I understand, on page load, your loading the manufacturers via ajax, and are populating your select element with the found companies. What exactly is the problem, and which part is not working? – super-qua Apr 23 '15 at 08:54

1 Answers1

0

You can check your server's response while populating dropdown options

function populateComp(xmlindata) {

 var mySelect = $('#manufacturer');
 $('#printertype').disabled = false;
 $(xmlindata).find("Company").each(function()
 {
     optionValue=$(this).find("id").text();
     optionText =$(this).find("name").text();
     var $opt = $('<option>   </option>').val(optionValue).html(optionText);
     if(/* compare current data with your device here */) $opt.attr("selected", "selected");
     mySelect.append($opt); 
 });
}
Orifjon
  • 915
  • 8
  • 25