Question

用户有一些选项，在选择其中一个选项后，我想显示更多选项，这些选项取决于首选的选项。比如，用户可以选择门数，例如1或2.选择一个数字后，我想显示所有门的选项低于该数字。也就是说，

如果选择1，则仅显示gate 1。
如果选择2，则显示gate 2和gate 1的选项。

我的phpmyadmin中有大部分变量用于存储目的，以避免在代码中创建大量变量。只是想要一些建议，如果你看到任何我可以改进的东西，请告诉我。

<div class="form-div-element">
  <label># of Gates</label>
  <select class="gates-change" name="no_gate" required>
    <option value="">Select Gate</option>
    <option value="28">1 Gate</option>
    <option value="29">2 Gates</option>
  </select>
</div>

<?php
  if($result)
  {
  foreach($result as $row)
  {
    if($row->id == 31 || $row->id == 32 || $row->id == 33)
    {?>
      <div class="form-div-element ecl-variation ecl-variation<?php echo $row->id;?>" style="display:block!important">
    <?php }
    else
    {?>
      <div class="form-div-element ecl-variation ecl-variation<?php echo $row->id;?>">
  <?php }?>
      <label><?php echo $row->variation_name;?></label>

      <?php
      if($row->variation_name == 'Stops')
      {?>
        <input type="hidden" name="stopvariationid" value="<?php echo $row->id;?>" id="stopvariationid"/>
      <?php }
      ?>

      <?php
          $var_value = (explode("|",$row->variation_value));
          $var_condition = $row->conditions;
          $arr = array('height_convert_configuration');
          //if($row->special_features != '')
          //{
          //    check_special_function($var_value,$row->special_features,$var_condition);
          //}
          //else if($row->variation_type =='selectbox')
          if($row->variation_type =='selectbox')
          {
            if($row->variation_function == 'calculation')
            {?>
              <select onchange = 'change_variation(this.value,<?php echo $row->id;?>)'>
                <option value="">Select Option</option>
                <?php for($i=0;$i<count($var_value);$i++)
                  {?>
                    <option value="<?php echo $var_value[$i];?>"><?php echo $var_value[$i];?></option>
                  <?php }?>
              </select>
          <?php }
            else
            { ?>
              <select class="gate_datatype" name="gate_type">
                <option value="">Select Option</option>
                <?php for($i=0;$i<count($var_value);$i++)
                  {?>
                    <option value="<?php echo $var_value[$i];?>|<?php echo $row->special_features;?>"><?php echo $var_value[$i];?></option>
                <?php }?>
              </select>
          <?php }
          }
          else if($row->variation_type =='textbox')
          {?>
            <?php for($i=0;$i<count($var_value);$i++)
            {?>
              <?php echo $var_value[$i];?>
            <?php }?>
        <?php }
          else if($row->variation_type =='radiobox')
          {?>
            <?php for($i=0;$i<count($var_value);$i++)
            {?>
              <div class="radiobox-cont">
              <input onchange = 'change_radio_variation(this,this.value,<?php echo $row->id;?>)' type="radio" name="<?php echo $row->class;?>" value='<?php echo $var_value[$i];?>' /><?php echo $var_value[$i];?>
              </div>
            <?php }?>
        <?php }

          else if($row->variation_type =='checkbox')
          {?>
            <?php for($i=0;$i<count($var_value);$i++)
            {?>
              <div class="checkbox-cont <?php echo preg_replace('/\s+/', '_', $var_value1[$i]);?>">
                <?php if('Cabin Telephone' == $var_value[$i])
                  {?>
                    <input checked type="checkbox" onchange="change_check_varitaion(this,this.value,<?php echo $row->id;?>)" name="other_option[]" value='<?php echo $var_value[$i];?>' disabled="disabled" /><?php echo $var_value[$i];?>
                  <?php }
                  else
                  {?>
                    <input type="checkbox" onchange="change_check_varitaion(this,this.value,<?php echo $row->id;?>)" name="other_option[]" value='<?php echo $var_value[$i];?>' /><?php echo $var_value[$i];?>
                  <?php }?>
              </div>
            <?php }?>
        <?php }?>
    </div>
  <?php }

Answer 1

你可以通过两种方式做到这一点，第一种方式是做ajax，第二种方式是使用css。第一种方法假设这是您的选择代码，您可以在其中选择门

<div class="form-div-element">
  <label># of Gates</label>
  <select id="gates" onchange="change()" class="gates-change" name="no_gate" required>
    <option value="">Select Gate</option>
    <option value="28">1 Gate</option>
    <option value="29">2 Gates</option>
  </select>
</div>

// and this is your sub gates options which will be empty at first and its display will be none

<div id="subgates_div" class="form-div-element" style="display:none;">
  <label># of Sub Gates</label>
  <select id="subgates" class="gates-change" name="sub_no_gate" required>
    <option value="">Select Sub Gate</option>
  </select>
</div>

在选择门时，您可以使用ajax来获取所选门的子选项，如下所示。在此代码中，您的网址和我的网址将有所不同。

function change() {

    var selected = $('#gates').find(":selected").attr("value");

    $.ajax({
        type: "POST",
        url: '<?php echo base_url('get_sub_options') ?>',
        dataType: 'json',
        data: {category: selected},
        success: function (data) {
            console.log(data);
            //remove disabled from province and change the options
            $('#subgates_div').show();

            $('select[name="sub_no_gate"]').html(data.subgates);
        }
    });



}

并且你的php函数应该是这样的，首先我已经创建了一个名为subgates的数组。我使用post中的值从数据库中检索了子门。在您的情况下，此查询可能会有所不同。我已经为子门应用了foreach循环并创建了一个新的选项元素，其中包含相应的子门id和子门名称，并将其附加到数组中。最后使用json_encode

返回数组

function get_sub_category() {
    $data['subgates'] = array();
    $subgates = $this->db->get_where('subcategories', array('id' => $_POST['category']))->result();
    foreach ($subgates as $key => $val) {
        $data['subgates'][] = <<<EOD
        <option value='$val->id'>$val->sub_gate_name</option>
        EOD;
    }
    echo json_encode($data);
}

另一种方法是使用css。要做到这一点，你应该首先列出门和子门的所有这些选项。像这样

// gates options
<div class="form-div-element">
  <label># of Gates</label>
  <select id="gates" onchange="change()" class="gates-change" name="no_gate" required>
    <option value="">Select Gate</option>
    <option value="28">1 Gate</option>
    <option value="29">2 Gates</option>
  </select>
</div>

//sub gate options one
<div id="subgates-<?php echo $subgates->id; ?>" class="form-div-element" style="display:none;">
  <label># of Sub Gates</label>
  <select id="subgates" class="gates-change" name="sub_no_gate" required>
    <option value="">Select Sub Gate</option>
  </select>
</div>

//sub gate option 2
<div id="subgates-<?php echo $subgates->id; ?>" class="form-div-element" style="display:none;">
  <label># of Sub Gates</label>
  <select id="subgates" class="gates-change" name="sub_no_gate" required>
    <option value="">Select Sub Gate</option>
  </select>
</div>
// and so on

在这种情况下，您应该记住的是，您的子门选项div id应该是动态的，并且首先显示为none 现在当你选择一个门使用onchange并改变各个子门的显示css时，就像这样

function change() {

    $(".form-div-element").hide();
    var selected = $('#gates').find(":selected").attr("value");
     $('#subgates-'+selected).show();




}

希望这会给你一些想法，如果你有任何困惑，请随时提出

Answer 2

总而言之，在我看来，你的问题实际上包含两个问题：

如何根据用户选择动态显示/隐藏DOM元素

选择一个号码后，我想显示所有门的选项低于该号码。
如何优化PHP代码

只是想要一些建议，如果你看到任何我可以改进的东西，请告诉我。

第二个是广泛的方式！也许只是一个快速的建议：如果它有效，那么它很好。快速俯视它似乎没问题。

请参阅我的第一个工作代码，实际上只需要对您现有的源代码进行一些自定义（如果有的话）。不要忘记它只是一个模型;如果你需要一些进一步的帮助或者想要了解更多有关最新情况的解释，请告诉我......

＆＃13;

jQuery('.form-div-element').not('.ecl-variation').find('select').on('change', function() {

    var i = -1,
        $conditional = jQuery('.ecl-variation').hide(), // hide in advance
        iGates = +(jQuery(this).find('option:selected').attr('data-gates-sum')); // get required gate(s) based on selected options "data-gates-sum"-attribute
        // version based on text: `iGates = +($(this).find('option:selected').text().split(' ')[0])` | pro: no additional markup, con: error prone, maintenance

    // count up to required gate(s) and make them visible
    while ( ++i < iGates ) {
        $conditional[i].style.display = 'block';
    }

});

＆＃13;

.ecl-variation{
    display: none; /* hide conditional selects in advance */
}

＆＃13;

<!-- minimized mockup -->
<div class="form-div-element">
    <label># of Gates</label>
    <select>
        <option value="">Select Gate</option>
        <!-- decided to add a data attribute instead of relying on text which could change more likely (maintenance) -->
        <option value="28" data-gates-sum="1">1 Gate</option>
        <option value="29" data-gates-sum="2">2 Gates</option>
    </select>
</div>

<div class="form-div-element ecl-variation">
    <label># of Gates | conditial 1</label>
    <select>
        <option value="">Select Gate Sub</option>
        <option value="3">abc</option>
        <option value="4">xyz</option>
    </select>
</div>

<div class="form-div-element ecl-variation">
    <label># of Gates | conditial 2</label>
    <select>
        <option value="">Select Gate Sub</option>
        <option value="5">123</option>
        <option value="6">789</option>
    </select>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何实施？

＆＃13;

.ecl-variation{
    display: none; /* hide conditional selects in advance */
}

＆＃13;

<body>

    <!-- minimized mockup -->
    <div class="form-div-element">
        <label># of Gates</label>
        <select>
            <option value="">Select Gate</option>
            <option value="28" data-gates-sum="1">1 Gate</option>
            <option value="29" data-gates-sum="2">2 Gates</option>
        </select>
    </div>

    <div class="form-div-element ecl-variation">
        <label># of Gates | conditial 1</label>
        <select>
            <option value="">Select Gate Sub</option>
            <option value="3">abc</option>
            <option value="4">xyz</option>
        </select>
    </div>

    <div class="form-div-element ecl-variation">
        <label># of Gates | conditial 2</label>
        <select>
            <option value="">Select Gate Sub</option>
            <option value="5">123</option>
            <option value="6">789</option>
        </select>
    </div>

    <!-- YOUR CODE ENDS HERE -->

    <!-- load jquery from cdn -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

    <!-- provide a local copy as fallback in case that cdn is not available  -->
    <script>window.jQuery||document.write('<script src="path/to/your/local/copy/jquery-1.12.4.min.js"><\/script>')</script>

    <!-- implement your custom site specific script(s) inline -->
    <script>
    (function( $ ) {

        $('.form-div-element').not('.ecl-variation').find('select').on('change', function() {

            var i = -1,
                $conditional = $('.ecl-variation').hide(),
                iGates = +($(this).find('option:selected').attr('data-gates-sum'));

            while ( ++i < iGates ) {
                $conditional[i].style.display = 'block';
            }

        });

    })( jQuery )
    </script>

    <!-- instead of deploying your scripts inline you can load them also like this:
    <script src="path/to/your/app.js"></script>
    -->

</body><!-- make sure that your scripts are located just before the closing body tag -->

＆＃13;

选择时会显示某些条件吗？

2 个答案:

如何实施？