Javascript没有遵循下拉列表选项

这个案例是关于dynamic div的下拉选择。 如果您必须在下拉列表中进行选择，那么您看到的内容将非常完美。这个例子是关于一个修改页面的，在这个页面中，过去已经做出了选择，并且值来自数据库

剧本：

$sql = "SELECT * FROM accountics WHERE id = '$id'";
$res = mysql_query($sql) or die (mysql_error());

while($row = mysql_fetch_assoc($res)) { ?>

<div class="col-sm-10">
  <select name="categorie" class="form-control" id="selectMe">
    <option selected value="<?php echo $row['categorie']; ?>"><?php echo $row['categorie']; ?></option>

 <?php                           
 $sql1 = "SELECT distinct naam FROM lijst_accountics_categorie";
 $res1 = mysql_query($sql1) or die (mysql_error());

 while($row = mysql_fetch_assoc($res1)) { 
 ?>                           

 <option value="<?php echo $row['naam']; ?>"><?php echo $row['naam']; ?></option>

 <?php 
 }

 $sql = "SELECT * FROM accountics WHERE id = '$id'";
 $res = mysql_query($sql) or die (mysql_error());

     while($row = mysql_fetch_assoc($res)) { 

 ?>                               

  </select>
</div>

现在我们有了div的脚本：

<!-- Category is restaurant -->
<div id="Restaurant" class="group">

   <div class="col-sm-10">
      <input type="text" name="bedrag1_excl" class="form-control" id="field-1" value="<?php echo $row['bedrag1_excl']; ?>">
   </div>

</div>


<!-- If category is not Restaurant -->
<div id="Geen" class="group">

<div class="col-sm-10">
   <input type="text" name="bedrag_excl" class="form-control" id="field-1" value="<?php echo $row['bedrag_excl']; ?>">
</div>
</div>

</div>

下面是javascript代码，用于在下拉列表之后调用div。我想这里有点不对劲。 “Geen”的价值就是一切，而不是餐厅作为一种选择

<script>
$(document).ready(function () {
   $('.group').hide();
   $('#Geen').show();

$('#selectMe').change(function () {
$('.group').hide();

var Restaurant = $("#selectMe").val();  

if(Restaurant === 'Restaurant') {
   $('#Restaurant').show();
} else {
   $('#Geen').show();
}   

})
});
</script>

如果我刷新此页面，这些值将在从先前保存的数据库值检索的下拉列表值中很好地实现。 现在，您可以从下拉列表中做出不同的选择，然后必须将其设置为旧值，否则javascript将无法工作。

您的PHP代码会在一段时间内循环，请看

因此，您有许多实例id=selectMe。 这是不正确的HTML。这是一个逻辑错误。 您需要使用CSS类而不是id作为

---

顺便说一句，如果您在事件侦听器中，您可以通过$this.val访问该值。它将精确地处理已更改的元素。

我找到了正确的解决方案。见下文：

<script>
$(document).ready(function () {
   $('.group').hide();

if($('#selectMe').val() === 'Restaurant') {
   $('#Restaurant').show();
}

else {
   $('#Geen').show();
}


$('#selectMe').change(function () {
   $('.group').hide();


if($('#selectMe').val() === 'Restaurant') {
   $('#Restaurant').show();
}

else {  
   $('#Geen').show();
}


  })
});
</script>

---

改变这个会给我同样的结果。还有什么我可以试试的吗？我需要javascript的id。那么我如何更新javascript呢？我不明白你的答案。我已将javascript中的var更改为：var Restaurant=$selectMe.val；

<script>
$(document).ready(function () {
   $('.group').hide();

if($('#selectMe').val() === 'Restaurant') {
   $('#Restaurant').show();
}

else {
   $('#Geen').show();
}


$('#selectMe').change(function () {
   $('.group').hide();


if($('#selectMe').val() === 'Restaurant') {
   $('#Restaurant').show();
}

else {  
   $('#Geen').show();
}


  })
});
</script>