jquery Selected下拉字段为空_Jquery_Ajax_Jquery Chosen

jquery Selected下拉字段为空

jquery ajax

jquery Selected下拉字段为空,jquery,ajax,jquery-chosen,Jquery,Ajax,Jquery Chosen,我正在开发我的第一个ajax，jquery选择的应用程序，我对一个困扰我好几天的问题感到愤怒。我正在尝试动态填充选定的下拉列表。第一个下拉列表（1-automarke）正确填充第二个下拉列表（2-automodell）不显示任何内容： HTML代码： <table> <tr> <td align="Left" valign="center"><p>Automarke ausw&auml

我正在开发我的第一个ajax，jquery选择的应用程序，我对一个困扰我好几天的问题感到愤怒。我正在尝试动态填充选定的下拉列表。第一个下拉列表（1-automarke）正确填充第二个下拉列表（2-automodell）不显示任何内容：

HTML代码：

<table>
        <tr>        
            <td align="Left" valign="center"><p>Automarke ausw&auml;hlen</p></td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td valign="center">
            <select data-placeholder="Bitte w&auml;hlen sie eine Automarke" id="1-automarke">
                </select>
            </td>
        </tr>

        <tr> 
            <td align="Left"><p>Automodell ausw&auml;hlen</p></td>
            <td align="Left">&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>
            <select data-placeholder="Bitte w&auml;hlen sie ein Automodell aus" id="2-automodell">
                </select>
            </td>
        </tr>
</table>

$.getJSON(baseUrl()+'index.php?option=com_xy& ... &format=raw',{key:val},function(r){

        if (val == "Automarke") {
            $("#1-automarke").empty();
            $("#1-automarke").append('<option></option>');
        } else if (arrayVal[0] == "1-automarke") {
            $("#2-automodell").empty();
            $("#2-automodell").append('<option></option>');                 
        }


        //read key and values 
        $.each(r.items,function(k,v){               
            console.log(val+" - key:"+k+" value:"+v);
            if (val == "Automarke") {
                $("#1-automarke").append('<option value="'+k+'"'+connection+'>'+k+'</option>');
            } else if (arrayVal[0] == "1-automarke") {
                $("#2-automodell").append('<option value="'+k+'"'+connection+'>'+k+'</option>');        
            }

        });


        if (val == "Automarke") {       
            $("#1-automarke").trigger("liszt:updated");                 
            $("#1-automarke").prop("disabled", false);                                  
        } else if (arrayVal[0] == "1-automarke") {

            $("#2-automodell").trigger("liszt:updated");                    
            $("#2-automodell").prop("disabled", false);         

        }               

        refreshSelects();

  <td valign="center">
  <select id="1-automarke" data-placeholder="Bitte wählen sie eine Automarke" style="display:     none;">
  <option></option>
  <option value="Abarth">Abarth</option>
  <option value="Alfa Romeo">Alfa Romeo</option>
  <option value="Audi">Audi</option>
    <option value="Bentley">Bentley</option>
    ...
    </select>
    <div id="1_automarke_chosen" class="chosen-container chosen-container-single" style="width: 300px;" title="">
    <a class="chosen-single" tabindex="-1">
    <span>Audi</span>
    <div>
    <b></b>
    </div>
    </a>
    <div class="chosen-drop">
    <div class="chosen-search">
    <input type="text" autocomplete="off">
    </div>
    <ul class="chosen-results">
    <li class="active-result" style="" data-option-array-index="1">Abarth</li>
    <li class="active-result" style="" data-option-array-index="2">Alfa Romeo</li>
    <li class="active-result result-selected" style="" data-option-array-index="3">Audi</li>
    <li class="active-result" style="" data-option-array-index="4">Bentley</li>
    ...
    </ul>
    </div>
    </div>
    </td>

<td>
<select id="2-automodell" data-placeholder="Bitte wählen sie ein Automodell aus" style="display: none;">
<option></option>
<option value="80">80</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>
<option value="A4">A4</option>
<option value="A5">A5</option>
<option value="A6">A6</option>
<option value="A7">A7</option>
<option value="A8">A8</option>
</select>
<div id="2_automodell_chosen" class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 300px;" title="">
<a class="chosen-single chosen-default" tabindex="-1">
<span>Bitte wählen sie ein Automodell aus</span>
<div>
<b></b>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off" readonly="">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
</td>


澳大利亚汽车市场协会和澳大利亚汽车市场协会；赫伦
Automodell ausw和auml；赫伦

JS代码：

<table>
        <tr>        
            <td align="Left" valign="center"><p>Automarke ausw&auml;hlen</p></td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td valign="center">
            <select data-placeholder="Bitte w&auml;hlen sie eine Automarke" id="1-automarke">
                </select>
            </td>
        </tr>

        <tr> 
            <td align="Left"><p>Automodell ausw&auml;hlen</p></td>
            <td align="Left">&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>
            <select data-placeholder="Bitte w&auml;hlen sie ein Automodell aus" id="2-automodell">
                </select>
            </td>
        </tr>
</table>

$.getJSON(baseUrl()+'index.php?option=com_xy& ... &format=raw',{key:val},function(r){

        if (val == "Automarke") {
            $("#1-automarke").empty();
            $("#1-automarke").append('<option></option>');
        } else if (arrayVal[0] == "1-automarke") {
            $("#2-automodell").empty();
            $("#2-automodell").append('<option></option>');                 
        }


        //read key and values 
        $.each(r.items,function(k,v){               
            console.log(val+" - key:"+k+" value:"+v);
            if (val == "Automarke") {
                $("#1-automarke").append('<option value="'+k+'"'+connection+'>'+k+'</option>');
            } else if (arrayVal[0] == "1-automarke") {
                $("#2-automodell").append('<option value="'+k+'"'+connection+'>'+k+'</option>');        
            }

        });


        if (val == "Automarke") {       
            $("#1-automarke").trigger("liszt:updated");                 
            $("#1-automarke").prop("disabled", false);                                  
        } else if (arrayVal[0] == "1-automarke") {

            $("#2-automodell").trigger("liszt:updated");                    
            $("#2-automodell").prop("disabled", false);         

        }               

        refreshSelects();

  <td valign="center">
  <select id="1-automarke" data-placeholder="Bitte wählen sie eine Automarke" style="display:     none;">
  <option></option>
  <option value="Abarth">Abarth</option>
  <option value="Alfa Romeo">Alfa Romeo</option>
  <option value="Audi">Audi</option>
    <option value="Bentley">Bentley</option>
    ...
    </select>
    <div id="1_automarke_chosen" class="chosen-container chosen-container-single" style="width: 300px;" title="">
    <a class="chosen-single" tabindex="-1">
    <span>Audi</span>
    <div>
    <b></b>
    </div>
    </a>
    <div class="chosen-drop">
    <div class="chosen-search">
    <input type="text" autocomplete="off">
    </div>
    <ul class="chosen-results">
    <li class="active-result" style="" data-option-array-index="1">Abarth</li>
    <li class="active-result" style="" data-option-array-index="2">Alfa Romeo</li>
    <li class="active-result result-selected" style="" data-option-array-index="3">Audi</li>
    <li class="active-result" style="" data-option-array-index="4">Bentley</li>
    ...
    </ul>
    </div>
    </div>
    </td>

<td>
<select id="2-automodell" data-placeholder="Bitte wählen sie ein Automodell aus" style="display: none;">
<option></option>
<option value="80">80</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>
<option value="A4">A4</option>
<option value="A5">A5</option>
<option value="A6">A6</option>
<option value="A7">A7</option>
<option value="A8">A8</option>
</select>
<div id="2_automodell_chosen" class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 300px;" title="">
<a class="chosen-single chosen-default" tabindex="-1">
<span>Bitte wählen sie ein Automodell aus</span>
<div>
<b></b>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off" readonly="">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
</td>

$.getJSON（baseUrl（）+'index.php？option=com_xy&…&format=raw'，{key:val}，函数（r）{
如果（val==“自动标记”）{
$（“#1-automarke”）.empty（）；
$（“#1-自动标记”）。附加（“”）；
}否则如果（arrayVal[0]=“1-自动标记”）{
$（“#2-automodell”）.empty（）；
$（“#2-automodell”）。附加（“”）；
}
//读取键和值
$。每个（r）项，函数（k，v）{
控制台日志（val+“-键：+k+”值：+v）；
如果（val==“自动标记”）{
$（“#1-自动标记”）。附加（“”+k+“”）；
}否则如果（arrayVal[0]=“1-自动标记”）{
$（“#2-automodell”）。附加（“”+k+“”）；
}
});
如果（val==“自动标记”）{
$（“#1-automarke”）.trigger（“李斯特：更新”）；
$（“#1-automarke”）.prop（“禁用”，false）；
}否则如果（arrayVal[0]=“1-自动标记”）{
$（“#2-automodell”）.trigger（“李斯特：更新”）；
$（“#2-automodell”）.prop（“禁用”，false）；
}               
刷新选择（）；

从第一个下拉列表（id=“1-automarke”）中选择一个值后，我得到第一个字段（id=“1-automarke”）的结果，这很好：

HTML结果id=“1-automarke”：

<table>
        <tr>        
            <td align="Left" valign="center"><p>Automarke ausw&auml;hlen</p></td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td valign="center">
            <select data-placeholder="Bitte w&auml;hlen sie eine Automarke" id="1-automarke">
                </select>
            </td>
        </tr>

        <tr> 
            <td align="Left"><p>Automodell ausw&auml;hlen</p></td>
            <td align="Left">&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>
            <select data-placeholder="Bitte w&auml;hlen sie ein Automodell aus" id="2-automodell">
                </select>
            </td>
        </tr>
</table>

$.getJSON(baseUrl()+'index.php?option=com_xy& ... &format=raw',{key:val},function(r){

        if (val == "Automarke") {
            $("#1-automarke").empty();
            $("#1-automarke").append('<option></option>');
        } else if (arrayVal[0] == "1-automarke") {
            $("#2-automodell").empty();
            $("#2-automodell").append('<option></option>');                 
        }


        //read key and values 
        $.each(r.items,function(k,v){               
            console.log(val+" - key:"+k+" value:"+v);
            if (val == "Automarke") {
                $("#1-automarke").append('<option value="'+k+'"'+connection+'>'+k+'</option>');
            } else if (arrayVal[0] == "1-automarke") {
                $("#2-automodell").append('<option value="'+k+'"'+connection+'>'+k+'</option>');        
            }

        });


        if (val == "Automarke") {       
            $("#1-automarke").trigger("liszt:updated");                 
            $("#1-automarke").prop("disabled", false);                                  
        } else if (arrayVal[0] == "1-automarke") {

            $("#2-automodell").trigger("liszt:updated");                    
            $("#2-automodell").prop("disabled", false);         

        }               

        refreshSelects();

  <td valign="center">
  <select id="1-automarke" data-placeholder="Bitte wählen sie eine Automarke" style="display:     none;">
  <option></option>
  <option value="Abarth">Abarth</option>
  <option value="Alfa Romeo">Alfa Romeo</option>
  <option value="Audi">Audi</option>
    <option value="Bentley">Bentley</option>
    ...
    </select>
    <div id="1_automarke_chosen" class="chosen-container chosen-container-single" style="width: 300px;" title="">
    <a class="chosen-single" tabindex="-1">
    <span>Audi</span>
    <div>
    <b></b>
    </div>
    </a>
    <div class="chosen-drop">
    <div class="chosen-search">
    <input type="text" autocomplete="off">
    </div>
    <ul class="chosen-results">
    <li class="active-result" style="" data-option-array-index="1">Abarth</li>
    <li class="active-result" style="" data-option-array-index="2">Alfa Romeo</li>
    <li class="active-result result-selected" style="" data-option-array-index="3">Audi</li>
    <li class="active-result" style="" data-option-array-index="4">Bentley</li>
    ...
    </ul>
    </div>
    </div>
    </td>

<td>
<select id="2-automodell" data-placeholder="Bitte wählen sie ein Automodell aus" style="display: none;">
<option></option>
<option value="80">80</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>
<option value="A4">A4</option>
<option value="A5">A5</option>
<option value="A6">A6</option>
<option value="A7">A7</option>
<option value="A8">A8</option>
</select>
<div id="2_automodell_chosen" class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 300px;" title="">
<a class="chosen-single chosen-default" tabindex="-1">
<span>Bitte wählen sie ein Automodell aus</span>
<div>
<b></b>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off" readonly="">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
</td>


阿巴斯
阿尔法罗密欧
奥迪
宾利
...
奥迪

阿巴斯
阿尔法罗密欧

宾利
...

此代码用于第二个字段（id=“2-automdell”），其中

部分为空：

HTML结果id=“2-automdell”：

<table>
        <tr>        
            <td align="Left" valign="center"><p>Automarke ausw&auml;hlen</p></td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td valign="center">
            <select data-placeholder="Bitte w&auml;hlen sie eine Automarke" id="1-automarke">
                </select>
            </td>
        </tr>

        <tr> 
            <td align="Left"><p>Automodell ausw&auml;hlen</p></td>
            <td align="Left">&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>
            <select data-placeholder="Bitte w&auml;hlen sie ein Automodell aus" id="2-automodell">
                </select>
            </td>
        </tr>
</table>

$.getJSON(baseUrl()+'index.php?option=com_xy& ... &format=raw',{key:val},function(r){

        if (val == "Automarke") {
            $("#1-automarke").empty();
            $("#1-automarke").append('<option></option>');
        } else if (arrayVal[0] == "1-automarke") {
            $("#2-automodell").empty();
            $("#2-automodell").append('<option></option>');                 
        }


        //read key and values 
        $.each(r.items,function(k,v){               
            console.log(val+" - key:"+k+" value:"+v);
            if (val == "Automarke") {
                $("#1-automarke").append('<option value="'+k+'"'+connection+'>'+k+'</option>');
            } else if (arrayVal[0] == "1-automarke") {
                $("#2-automodell").append('<option value="'+k+'"'+connection+'>'+k+'</option>');        
            }

        });


        if (val == "Automarke") {       
            $("#1-automarke").trigger("liszt:updated");                 
            $("#1-automarke").prop("disabled", false);                                  
        } else if (arrayVal[0] == "1-automarke") {

            $("#2-automodell").trigger("liszt:updated");                    
            $("#2-automodell").prop("disabled", false);         

        }               

        refreshSelects();

  <td valign="center">
  <select id="1-automarke" data-placeholder="Bitte wählen sie eine Automarke" style="display:     none;">
  <option></option>
  <option value="Abarth">Abarth</option>
  <option value="Alfa Romeo">Alfa Romeo</option>
  <option value="Audi">Audi</option>
    <option value="Bentley">Bentley</option>
    ...
    </select>
    <div id="1_automarke_chosen" class="chosen-container chosen-container-single" style="width: 300px;" title="">
    <a class="chosen-single" tabindex="-1">
    <span>Audi</span>
    <div>
    <b></b>
    </div>
    </a>
    <div class="chosen-drop">
    <div class="chosen-search">
    <input type="text" autocomplete="off">
    </div>
    <ul class="chosen-results">
    <li class="active-result" style="" data-option-array-index="1">Abarth</li>
    <li class="active-result" style="" data-option-array-index="2">Alfa Romeo</li>
    <li class="active-result result-selected" style="" data-option-array-index="3">Audi</li>
    <li class="active-result" style="" data-option-array-index="4">Bentley</li>
    ...
    </ul>
    </div>
    </div>
    </td>

<td>
<select id="2-automodell" data-placeholder="Bitte wählen sie ein Automodell aus" style="display: none;">
<option></option>
<option value="80">80</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>
<option value="A4">A4</option>
<option value="A5">A5</option>
<option value="A6">A6</option>
<option value="A7">A7</option>
<option value="A8">A8</option>
</select>
<div id="2_automodell_chosen" class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 300px;" title="">
<a class="chosen-single chosen-default" tabindex="-1">
<span>Bitte wählen sie ein Automodell aus</span>
<div>
<b></b>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off" readonly="">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
</td>


80
A1
A2
A3
A4
A5
A6
A7
A8
您是自动模式澳大利亚的吗

AJAX部分工作正常，但我不知道为什么

为空。欢迎提供任何帮助返回的JSON是否具有正确的

内容类型：application/JSON

头？另一个选项是，返回的JSON无效（请尝试检查）是的，标题是正确的。相同的json请求在其他情况下也可以正常工作。我想我将切换到一个标准的select字段。