Question

select dropdown with diffrent output dropdown value

- 选择一个选项 - UNIFI 的Streamyx

当选择unifi时，它将仅显示unifi包的另一个下拉列表

当选择streamyx时，它将仅显示streamyx包的另一个下拉列表

 <div class="form-group" id="beb">
                          <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">  Package List :
                          </label>
                          <div class="col-md-6 col-sm-6 col-xs-12">
                             <select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
                                <option disabled selected value> -- select an option -- </option>
                                <?php
                        $result = mysqli_query($conn,"select * from unifi ORDER BY PACKAGE_NAME ASC");
                                while ($row=mysqli_fetch_assoc($result))
                                    {?>
                                        <option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
                                        <?php
                                    }
                        ?>
                             </select>
                          </div>
                       </div>
                        <div class="form-group" id="bob">
                          <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">  Package List :
                          </label>
                          <div class="col-md-6 col-sm-6 col-xs-12">
                             <select name="PACKAGE_ID_STREAMYX" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
                                <option disabled selected value> -- select an option -- </option>
                                <?php
                                $result = mysqli_query($conn,"select * from streamyx ORDER BY PACKAGE_NAME ASC");
                                while($row=mysqli_fetch_assoc($result))
                                    {?>
                                        <option value="<?php echo $row["PACKAGE_NAME"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
                                 <?php
                                    }
                                 ?>
                             </select>
                          </div>
                       </div>

这是根据所选内容隐藏下拉列表的JavaScript。

<script>    var a = document.getElementById('beb');
   if ((value) == 'UNIFI') 
  {
       a.style.display = '';
   } 
  else if((value) == 'STREAMYX')
  {
       a.style.display = 'none';
   }



 var a = document.getElementById('bob');
   if ((value) == 'UNIFI') 
  {
       a.style.display = 'none';
   } 
  else if((value) == 'STREAMYX')
  {
       a.style.display = '';
   }

      </script>

Answer 1

您可以使用jquery在选择框中选择第一项（ - 选择选项 - ）。你可以这样做：

$('select[name="PACKAGE_ID_UNIFI"]').prop('selectedIndex',0);

和

 $('select[name="PACKAGE_ID_STREAMYX"]').prop('selectedIndex',0);

我已将ID添加到选择框中，以便他们更容易在jquery中定位：

＆＃13;

$(function(){
  $('#streamSelect').change(function(){
    if( this.value === 'unifi'){
      $('#unifi-contaioner').removeClass('hidden');   // show the unifi selectbox
      $('#streamyx-contaioner').addClass('hidden');   // hide the streamyx selectbox
      $('#streamyx').prop('selectedIndex',0);         // reset the streamyx selectbox
    }else{
      $('#streamyx-contaioner').removeClass('hidden');  // show the streamyx selectbox
      $('#unifi-contaioner').addClass('hidden');        // hide the unifi selectbox
      $('#unifi').prop('selectedIndex',0);              // reset the unifi selectbox
    }
  });
})

＆＃13;

.hidden{
  opacity: 0.2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="streamSelect">
    <option value="unifi">unifi</option>
    <option value="streamyx">streamyx</option>
  </select>
</div>

<div id="unifi-contaioner">
  <label for="unifi">Package List unifi:</label>
  <select id="unifi" name="PACKAGE_ID_UNIFI">
    <option disabled selected value> -- select an option -- </option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

<div id="streamyx-contaioner" class="hidden">
  <label for="streamyx">Package List streamyx:</label>
  <select id="streamyx" name="PACKAGE_ID_STREAMYX" >
    <option disabled selected value> -- select an option -- </option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

＆＃13;

Answer 2

您可以使用更改事件检测用户选择。您正在使用纯hs但也标记了jQuery。我将在jQuery中给出示例，因为如果您已在页面上同时使用，那么您应该使用它。

您的示例也有几个问题。对不同的元素使用单独的变量。隐藏对我来说没有意义。无论如何我会为beb做例子，但我认为你应该重新审视你的问题。

不是改变css，而是在css中选择一个类更干净。

var $beb = $('#beb');
var $bob = $('#bob');

$beb.on('change', function (e) {
      $beb.toggleClass('selected');
});

function

隐藏

2 个答案: