php - 选择时是否会出现某些标准？

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 的数组。我已经使用帖子中的值从数据库中检索了子门。此查询在您的情况下可能有所不同。我已经为子门应用了 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 应该是动态的，并且一开始不会显示现在，当您选择一个门时，请使用 onchange 并更改相应子门的显示 CSS，如下所示

function change() {

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




}

希望这能给您一些想法，如果您有任何困惑，请随时询问