默认选择不在下拉菜单中显示

Question

这是从php文件中动态加载的下拉框。我已经设置了一个默认选项Select Language但是，一旦加载了ajax元素，就不会显示这个选项。

即使加载ajax项目后，如何将选择语言设置为默认值？

<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> 

Answer 1

$el.empty()语句从select所有选项。你不应该删除第一个选项。

为此，请使用not方法和:first伪类以保持默认选项。

$el.find('option').not(':first').remove(); 

Answer 2

因为您需要删除旧的选项，并没有松动的默认添加新的“选择语言”的文字，你可以这样做：

<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>