javascript下拉项目不会出现但可以选择

时间:2017-10-24 00:46:36

标签: javascript php jquery html css

我使用PHP和JQuery使用依赖下拉列表。当我从第一个列表中选择一个项目时,第二个列表会更新,但项目不会显示。可以选择第二个列表中的项目这是照片显示我如何选择项目但不显示。 enter image description here

我发出警告以显示所选项目以确保项目索引为真。这是带有课程名称的警报照片

enter image description here  那么如何才能显示这些项目?这是第一页代码:

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

2 个答案:

答案 0 :(得分:3)

您的选项列表仅定义了值,这就是您可以选择值但不存在文本的原因。我认为你应该使用这样的东西。

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

希望这有帮助

答案 1 :(得分:2)

您只返回选项中的值,但没有文本可以使用。

我冒昧地清理了一下代码,所以将来它更具可读性。

AUTH_USER_MODEL = 'users.User'
LOGIN_URL = '/login/'
LOGIN_REDIRECT_URL = 'base:home'

AUTHENTICATION_BACKENDS = (
    'django.contrib.auth.backends.ModelBackend',
)