css - 使用 ajax 或 jquery 更改下拉宽度

Question

我有一个国家/地区下拉列表，它会触发 ajax 调用以在选择时获取子状态。

这是状态下拉 html:

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

有了这个功能:(有效)

  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);
}   

}

当页面加载时，下拉菜单的宽度是正确的，但是当选择一个国家并加载状态时，状态下拉菜单更改/丢失宽度设置并默认为下拉菜单中最大的单词。我尝试给状态 dropdpwn 一个 id 并用 jquery 更改它，但它不起作用 - 有什么想法吗？

发送

Answer 1

您丢失了宽度设置，因为您正在替换 statediv 的内容，并且选择和宽度设置在 statediv 中。如果您在 statediv 之外的 CSS block 中设置宽度，则应保留宽度。

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

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