Question

这是Jquery Chosen插件的页面（和演示）。它非常方便。

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

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

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

您会注意到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

动态更新动态 如果您需要更新选择字段中的选项并希望选择选择更改，则需要在该字段上触发“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;
}

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

2 个答案: