使用 ajax 或 jquery 更改下拉宽度答案

【问题标题】：change drop down width with ajax or jquery使用 ajax 或 jquery 更改下拉宽度
【发布时间】：2013-12-08 20:20:55
【问题描述】：

我有一个国家/地区下拉菜单触发 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);
}

}

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.我试过给状态 dropdpwn 一个 id 并用 jquery 更改它，但它不起作用 - 有什么想法吗？

发送

【问题讨论】：

标签： css ajax width html-select

【解决方案1】：

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

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

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

【讨论】：

太尴尬了。哈哈。我试图用 ajax/jq 来做这件事-嗯谢谢小伙子！我只在下拉菜单上有一个样式，但这显然是不够的..

【解决方案2】：

将此代码添加到您的 CSS 文件中：

#statediv select {
    width: 200px;
}

您的脚本基本上是在替换状态下拉列表，这就是它改变宽度的原因。

【讨论】：