[英]How to enable another input field when a user selects an option from dropdown in React
[英]Open Another Input Text when the user selects an option
我是一個新手,我有這個項目,如果列出的選項不在下拉列表中,用戶應該可以選擇自定義輸入。
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> ";
}
我想如果用戶選擇自定義選項,那么輸入文本應該出現在屏幕上。
如果用戶選擇了自定義選項,那么您可以給他一個輸入。
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" />
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>
演示代碼:
首先,您應該輸入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" />
Angular Version
Angular CLI:13.0.3 節點:16.15.0 Package 管理器: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;
}
}**
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.