HTML Select, options returned via Ajax, item that should be selected is not being selected

Question

This is an odd one. I have, with the help of others and sample code and so on, put together a routine that, based on one select, via ajax, passes the value to a php file, which then builds a second select with options, each option has the code set to check the value of a variable and set the selected attribute. The following is an example of the returned select statement with options:

In theory there should be a closing bracket after the question mark for the PHP (?>), but it was showing up in the string.

Anyway, if I copy this code directly into the HTML, everything works as expected. If I have it stuffed into a DIV tag's html via a command in JavaScript like:

$("#namebranchoptions").html(data);

The contents appear correctly in the select, but nothing is showing as selected (it shows as blank). I have inserted a statement into the HTML after this to show the value of the variable:

" ?>

And that appears correctly. I am stumped. As noted, if I paste the above into the HTML, into the DIV tag manually and re-load the page, I get the expected results. I cannot see why there is this difference. It may be some subtle aspect of the SELECT or something, I don't know. It's ... frustrating.

Ken Mayer · Accepted Answer

Thanks for the suggestions. After puzzling a bit, I worked out how to handle it ... as was pointed out by the first comment, the PHP program should be determining the option to be marked as "select"ed ... the trick then became referencing the branch that I needed to do the comparison (what the value was to determine which option had the select attribute set). I used an input set as hidden:

Then modified the ajax code:

    function getNameBranch()
     {
        var region = document.getElementById("nameregion").value;
        var branch = document.getElementById("namebranch").value;
        $.ajax
       ({
           type: "POST",
           url: "namebranch.php",
           data: { 'myRegion' : region, 'branch' : branch },
           //cache: false,
           success: function(data)
           {
//alert( data );                 
              $("#namebranchoptions").html(data);
           }  // end success
        }); // end ajax call
     }; // end function getNameBranch

After tinkering with the PHP a bit to ensure I had the right options it worked perfectly. Thanks for pointing me in the right direction!

HTML Select, options returned via Ajax, item that should be selected is not being selected

Answers (2)

Related Questions