我使用PHP和JQuery使用依赖下拉列表。当我从第一个列表中选择一个项目时,第二个列表会更新,但项目不会显示。可以选择第二个列表中的项目这是照片显示我如何选择项目但不显示。
我发出警告以显示所选项目以确保项目索引为真。这是带有课程名称的警报照片
<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; }
答案 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',
)