dongqiang4819
2017-06-02 09:12
浏览 695

默认选择不显示在下拉列表中

This is dynamically loaded dropdown box from a php file. I have put a default option Select Language But this is not displaying once the ajax elements loaded.

How can I make the select language as default even after the ajax items are loaded?

<select id="name">
  <option style="display:none;" selected>Select language</option>
</select>

<?php if (isset($_GET['place']) && $_GET['place'] != '') { ?>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        $.ajax({
            type: "POST",
            data: {place: '<?= $_GET["place"] ?>'},
            url: 'listplace.php',
            dataType: 'json',
            success: function (json) {
                if (json.option.length) {
                    var $el = $("#name"); 
                    $el.empty(); // remove old options
                    for (var i = 0; i < json.option.length; i++) {
                        $el.append($('<option>',
                            {
                                value: json.option[i],
                                text: json.option[i]
                            }));
                    }
                }else {
                    alert('No data found!');
                }
            }
        });
    </script>

图片转代码服务由CSDN问答提供 功能建议

这是来自php文件的动态加载下拉框。 我已经设置了一个默认选项选择语言但是一旦加载了ajax元素,这就不显示了。

即使加载了ajax项,如何将选择语言设为默认语言?

 &lt; select id =“name”  &gt; 
&lt; option style =“display:none;” 选择&gt;选择语言&lt; /选项&gt; 
&lt; / select&gt; 
 
&lt;?php if(isset($ _ GET ['place'])&amp;&amp; $ _GET ['place']!=''){  ?&gt; 
 
&lt; script src =“https://code.jquery.com/jquery-3.2.1.min.js”&gt;&lt; / script&gt; 
&lt; script&gt; 
 $。  ajax({
 type:“POST”,
 data:{place:'&lt;?= $ _GET [“place”]?&gt;'},
 url:'listplace.php',
 dataType:  'json',
成功:function(json){
 if(json.option.length){
 var $ el = $(“#name”); 
 $ el.empty(); //删除 旧选项
 for(var i = 0; i&lt; json.option.length; i ++){
 $ el.append($('&lt; option&gt;',
 {
 value:json.option [  i],
 text:json.option [i] 
})); 
} 
} else {
 alert('找不到数据!'); 
  } 
} 
}); 
&lt; / script&gt; 
   
 
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • duanpacan9388 2017-06-02 09:16
    已采纳

    $el.empty() statement removes all the options from the select. You shouldn't remove the first option.

    For this, use not method and :first pseudo-class in order to keep the default option.

    $el.find('option').not(':first').remove();
    
    打赏 评论
  • douding_1073 2017-06-02 09:24

    Because you need to remove old options, and add new ones without loosing the default "Select language" text, you can do like this:

    <select id="name">
      <option style="display:none;" selected>Select language</option>
    </select>
    
    <?php if (isset($_GET['place']) && $_GET['place'] != '') { ?>
    
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            $.ajax({
                type: "POST",
                data: {place: '<?= $_GET["place"] ?>'},
                url: 'listplace.php',
                dataType: 'json',
                success: function (json) {
                    if (json.option.length) {
                        var $el = $("#name"); 
                        $el.empty(); // remove old options
                        //adding your default value
                        $el.append('<option selected>Select language value</option>');
                        for (var i = 0; i < json.option.length; i++) {
                            $el.append($('<option>',
                                {
                                    value: json.option[i],
                                    text: json.option[i]
                                }));
                        }
                    }else {
                        alert('No data found!');
                    }
                }
            });
        </script>

    </div>
    
    打赏 评论

相关推荐 更多相似问题