Question

当我从ddl中选择选项时，同一类的div是不可见的，所以当我从ddl中选择选项时，我想要显示特定选项的div。

在我的选择中，选项值来自数据库（1.mobile，2.email），所以我想在选择移动设备时出现div编号1。

$(function() {
  $('#theme').change(function() {
    $('#number' + $(this).val('mobile')).show();
  }).change();
});

<label for="mode">Communication Mode :</label>
<?php
      echo "<select name='ddlmode' id='theme' required >";
      echo "<option>-select-</option>";
      include "configpdo.php";
      $stmt = $conn->prepare( "select value from key_master where ems_key='k006' or ems_key='k007'" );
      $stmt->execute();
    $result = $stmt->fetchAll();
     foreach ( $result as $row ){
    echo "<option>" . $row[ "value" ] . "</option>";
                  }
      echo "</select>";
      ?>
  <div id="number1" class="box">
    <label for="sms">SMS text</label>
    <textarea rows="15" cols="80"></textarea>
  </div>
  <div id="number2" class="box">
    <label for="mail">Mail :/label>
      <label for="subject">Subject</label>
    <textarea rows="2" cols="80"></textarea>
    <label for="email" style="font-size: 20px;">Body</label>
    <textarea rows="15" cols="80"></textarea>
  </div>

Answer 1

假设您的select html是这样的

<select>
   <option value="0">Select</option>
   <option value="1">Mobile</option>
   <option value="2">Email</option>
</select>

然后尝试这个

 $(function() {
    $('#theme').change(function() {
       $('.box').hide();
       $('#number' + $(this).val()).show();
    })
 });

Answer 2

第一：您需要隐藏div[id^=number]所有number div ids，并使用option:selected index()显示该部分..下一个代码应该与您合作< / p>

$(function() {
  $('#theme').change(function() {
    $('div[id^=number]').hide();
    var GetSectionNum = $(this).find('option:selected').index() == 0 ? 1 : $(this).find('option:selected').index(); // if the selected option is 0 mean 'select' change it to the next of it directly .. so in this code if you try to select 'select' it will select mobile
   $(this).find('option:eq('+GetSectionNum+')').prop('selected' , true);
    $('#number' + GetSectionNum).show();
  }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="theme">
   <option>Select</option>
   <option>Mobile</option>
   <option>Email</option>
</select>
<div id="number1" class="box">
  <label for="sms">SMS text</label>
  <textarea rows="15" cols="80"></textarea>
</div>
<div id="number2" class="box">
  <label for="mail">Mail :/label>
    <label for="subject">Subject</label>
  <textarea rows="2" cols="80"></textarea>
  <label for="email" style="font-size: 20px;">Body</label>
  <textarea rows="15" cols="80"></textarea>
</div>

Answer 3

你应该把价值放在像这样的选项上

echo "<option value="'.$row[ "value" ].'">" . $row[ "value" ] . "</option>";

希望它有所帮助。

如何根据所选选项显示特定div

3 个答案: