Ajax 调用后 Jquery 选择的插件样式丢失

Question

这里是 Jquery Chosen Plugin 的页面（和演示）。这很方便。

http://harvesthq.github.io/chosen/

---

所以我的问题是我使用 2 阶段输入表单来收集位置信息。 第一个选择菜单是针对国家/地区的。选择国家后，第二个输入字段仅在字段 1 中显示该国家/地区的选项。Neato！

这是我的问题的现场演示。

http://globatum.com/admin/

您会注意到 ajax 调用有效，但是一旦返回第二个字段，样式就会丢失！ =(

根据插件

选择菜单必须在某个html框架内

    <select data-placeholder="Select City" class="chzn-select" style="width:350px;" tabindex="2" name="city">
<? while($row=mysql_fetch_array($result)) { ?>
<option class="active-result option"
style="padding: 5px 0px 5px 0px; font-family:arial; font-size:12px;"

><?=$row['city']?></option>
<? } ?>
</select>

这在技术上应该有效，但没有。 关于如何在通话后保持样式的任何线索？

这里是返回的php页面

<!--//---------------------------------+
//  Developed by Roshan Bhattarai    |
//  http://roshanbh.com.np           |
//  Contact for custom scripts       |
//  or implementation help.          |
//  email-nepaliboy007@yahoo.com     |
//---------------------------------+-->
<?
#### Roshan's Ajax dropdown code with php
#### Copyright reserved to Roshan Bhattarai - nepaliboy007@yahoo.com
#### if you have any problem contact me at http://roshanbh.com.np
#### fell free to visit my blog http://php-ajax-guru.blogspot.com
?>

<? $country = $_GET['country'];
$link  = mysql_connect("SNIP");
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('SNIP');
$query="SELECT city FROM location WHERE country='$country' ORDER BY `city` ASC";
$result=mysql_query($query);

?>
<div class="x">
<br>
<select data-placeholder="Select City" class="chzn-select" style="width:350px;" tabindex="2" name="city">
<? while($row=mysql_fetch_array($result)) { ?>
<option class="active-result option"><?=$row['city']?></option>
<? } ?>
</select>
</div>

Answer 1

您是否尝试过在重新加载第二个列表时触发liszt:updated 事件？来自doco

动态更新选择 如果您需要更新您的选择字段中的选项并希望 Chosen 获取更改，您需要在该字段上触发“liszt:updated”事件。 Chosen 将根据更新的内容重新构建自己。

编辑：针对关于放置位置的评论，我认为您需要将文档头部的 getcity 函数修改为：

function getCity(country) {
    var strURL="findCity.php?country="+ country;
    var req = getXMLHTTP();
    if (req) {
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('citydiv').innerHTML=req.responseText;                      
                    $("#citydiv select").trigger("liszt:updated");
                    ///rest of function

理论上，这应该在您替换城市 div 的内容后在正确的位置触发事件

Answer 2

为所选容器设置样式对我有用

.chosen-container input {
width: 100% !important;
}