javascript下拉元素不出现但可以选择

Question

我正在使用 PHP 和 JQuery 来使用依赖下拉列表。当我从第一个列表中选择一个元素时，第二个列表会更新但元素不会出现。可以选择第二个列表中的元素这是照片显示我如何选择元素但不出现。

我发出警报以显示所选元素以确保元素索引为真。这是带有类(class)名称的警报照片

那么我怎样才能让元素出现呢？这是第一页代码:

    <div class="styled-select green semi-square">
<select name="per" id="per" onchange="getfirst(this.value);">
  <option selected="selected">Choose one</option>
  <?php
    foreach($Names as $name) { ?>
      <option value="<?= $name ?>"><?= $name ?></option>
  <?php
    } ?>
</select>
</div>
<div class="styled-select green semi-square">
<select name="per1" id="per1" onchange="getsecond(this.value);" >
<option selected="selected">Choose one</option>
  <option value=""></option>
</select> 
</div>
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script >
function getfirst(val){
    $.ajax({
        type:"POST",
        url:"getdata.php",
        data:"cid="+val,
        success:function(data){
            $("#per1").html(data);
        }
    });
}
function getsecond(val1){
    alert(val1);
}
</script>

这是选择第一项时的代码 (getdata.php):

   <?php
 require "init.php";
 global $con;

 if(!empty($_POST["cid"])){
        $query="Select * From subjects";
        $results = mysqli_query($con,$query);
        foreach($results as $value){

            ?>
            <option class="styled-select" value="<?php echo $value["Name"];?>"></option>
            <?php
        }
 }
 else 
     echo "Error";
?>

这是下拉样式的 Css 样式:

.styled-select {
   background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
   height: 29px;
   overflow: hidden;
     width: 240px;
     margin-left:auto;
     margin-right:auto;
     text-align-last:center;


}
.styled-select select {
   background: transparent;
   border: none;
   color:black;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}
.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

/* -------------------- Colors: Background */
.slate   { background-color: #ddd; }
.green   { background-color: #09C66E; }
.blue    { background-color: #3b8ec2; }

Answer 1

您的选项列表仅定义了值，这就是为什么您可以选择该值但那里没有文本的原因。我认为你应该使用这样的东西。

<option class="styled-select" value="<?php echo $value["Name"];?>"><?php echo $value["Name"];?></option>

希望对你有帮助