CODEWITHSUNDEEP
cssajaxwidthhtml-select
FstaRocka
FstaRocka

Reputation: 278

change drop down width with ajax or jquery

I have a country drop down that triggers an ajax call to fetch child states on selection.

This is the state drop down html:

<div id="statediv"  ><select name="state" style="width:200px;" id="stateDrop">

with this function: (it works)

  function getState(countryId) {  



var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();

if (req) {

  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      // only if "OK"
      if (req.status == 200) {   

        document.getElementById(\'statediv\').innerHTML=req.responseText;   




      } else {
        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
      }
    }       
  }     
  req.open("GET", strURL, true);
  req.send(null);
}

}

when the page loads the drop down is the correct width, but when a country is selected and the states load, the state drop down changes/loses the width setting and defaults to the biggest word in the drop down. Ive tried giving the state dropdpwn an id and changing it with jquery but its not working - any ideas?

tx

Upvotes: 0

Views: 507

Answers (2)

Koliu
Koliu

Reputation: 11

Add this code to your CSS file:

#statediv select {
    width: 200px;
}

Your script is basically replacing the state drop down, that's why it changes its width.

Upvotes: 1

Leigh McCulloch
Leigh McCulloch

Reputation: 1976

You're loosing the width setting because you're replacing the contents of statediv, and the select and the width setting are inside statediv. If you set the width in a CSS block outside of statediv then the width should be preserved.

<style>
    #statediv select {
        width:200px;
    }
</style>

<div id="statediv">
    <select name="state" id="stateDrop">
    ...

Upvotes: 2

Related Questions