当用户选择一个选项时打开另一个输入文本

Question

我是新手，我有这个项目，如果列出的选项不在下拉列表中，用户应该可以选择自定义输入。

HTML

<div class="form-group">
            <label  class="col-sm-2 col-form-label">Select Page Size</label>
            <select name = 'pageSelector' class="col-sm-3">   
                <option value ="">Select Page Size</option> 
                <option value ="84.1|118.9">A0</option> 
                <option value = "59.4|84.1">A1</option> 
                <option value = "7.4|10.5">A7</option> 
                <option value = "custom">Select Custom</option> 
            </select> 
        </div>

PHP

if(isset($_POST["pageSelector"]))
{
    $result = $_POST['pageSelector'];
    if($result == "")
    {
        echo "<script>alert('Please select the Page')</script>";   
    }
    
    $result_explode = explode('|', $result);
    $width_page = $result_explode[0];
    $height_page = $result_explode[1];
    

    // Converting the string variables to integer
    $width_plate=(double)$width_plate;
    $height_plate=(double)$height_plate;
    $width_page=(double)$width_page;
    $height_page=(double)$height_page;


    // To calculate the number of pages that can be print with one selected plate
    $calculated_width = $width_plate/$width_page;
    $calculated_height = $height_plate/$height_page;
    $print_include = (int)$calculated_height*(int)$calculated_width;

    echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";

}

我希望如果用户选择自定义选项，那么输入文本应该出现在屏幕上。

Answer 1

如果用户选择了自定义选项，那么您可以给他一个输入。

let selectEl = document.getElementById('select-list');

selectEl.addEventListener('change', (e) => {
  if (e.target.value == 'custom') {
    document.getElementById('txt-custom').style.display = 'block';
  } else {
    document.getElementById('txt-custom').style.display = 'none';
  }
});

#txt-custom {
  display: none;
}

<select id="select-list">
  <option value="">Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="custom">Custom</option>
</select>
<input type="text" id="txt-custom" name="custom-value" />

Answer 2

var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');

pageSelector.addEventListener('change', function(){
    if(this.value == "custom") {
        customInput.classList.remove('hide');
    } else {
        customInput.classList.add('hide');
    }
})

.hide {
    width: 0;
    height: 0;
    opacity: 0;
}

<div class="form-group">
    <label  class="col-sm-2 col-form-label">Select Page Size</label>
    <select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
        <option value ="">Select Page Size</option> 
        <option value ="84.1|118.9">A0</option> 
        <option value = "59.4|84.1">A1</option> 
        <option value = "7.4|10.5">A7</option> 
        <option value = "custom">Select Custom</option>
    </select>
    <input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>

Answer 3

演示代码：

首先你应该输入 style="display:none" 和 jQuery

jQuery(document).ready(function() {
    jQuery("#selectId").change(function() {
        if (jQuery(this).val() === 'custom'){ 
            jQuery('input[name=other_input]').show();   
        } else {
            jQuery('input[name=other_input]').hide(); 
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name = 'pageSelector' class="col-sm-3" id="selectId" >   
  <option value ="">Select Page Size</option> 
  <option value ="84.1|118.9">A0</option> 
  <option value = "59.4|84.1">A1</option> 
  <option value = "7.4|10.5">A7</option> 
  <option value = "custom">Select Custom</option> 
</select> 
<br><br><br>
<input type="text" name="other_input" style="display:none" />

Answer 4

Angular Version

Angular CLI：13.0.3 节点：16.15.0 包管理器：npm 8.5.5

在 .html 文件中

   **<div class="col-md-6">
                  <label class="form-label">Attendence Type</label>
                  <select (change)="type($event)" class="form-select" aria-label="Default select example" >
                    <option selected value="P">Present</option>
                    <option value="A">Absent</option>
                    <option value="PL">Paid Leave</option>
                    <option value="UL">Unpaid Leave</option>
                  </select>
                </div>**

I want to Show this input after select paid leave

**<div *ngIf="plFlag" class="col-md-6">
              <label class="form-label">Leave Type</label>
              <select class="form-select" aria-label="Default select example">
                <option selected disabled>Leave Type</option>
                <option value="CL">Causel Leave</option>
                <option value="SL">Seek Leave</option>
              </select>
            </div>**

and in .ts File

 **type(event: any) {
    console.log(event.target.value);
    if (event.target.value == "PL") {
      this.plFlag = true;
    }
    else {
      this.plFlag = false;
    }
  }**

当用户选择一个选项时打开另一个输入文本

Open Another Input Text when the user selects an option

javascript

php

option