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

Question

这是 Jquery 选择插件的页面（和演示）。 这很方便。

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事件？ 来自多科

动态更新 Chosen如果您需要更新选择字段中的选项并希望 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

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

Answer 2

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

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