如果在選擇中選擇了特定選項，則如何進行輸入
[英]How to make input required if specific options are selected in a select
問題描述
僅當在<select>列表中選擇了特定選項時，我才努力使輸入字段為必填項。
例如：
<select id="model">
<option value="model1">Model 1</option>
<option value="model2">Model 2</option>
<option value="model3">Model 3</option>
<option value="model4">Model 4</option>
</select>
<input type="text" name="extra">
如果選擇了模型2或3，則需要extra輸入。
我該怎么做呢？
4 個解決方案
解決方案1
0 2013-05-16 21:14:21
好吧，您只能在javascript客戶端上做很多事情。 最終，您將不得不在服務器上強制執行此操作。 要在不依賴瀏覽器特定實現或HTML5的情況下進行此客戶端操作，您將需要使用onsubmit()事件處理程序手動檢查所需的值。
<form onsubmit="return validateFormData(this)">
另外，請確保為您的select元素起一個易於使用的名稱：
<select id="model" name="model"></select>
然后在您的JavaScript中：
function validateFormData(oForm) {
//Let's say that a value of 'model3' makes 'extra' required
if(oForm.model.value=='model3') {
if(oForm.extra.value=='') {
//returning false will prevent the form from submitting
return false;
}
}
}
解決方案2
0 已采納 2013-05-16 21:22:34
這是一個完全有效的示例，以演示如何使用jQuery解決這兩種情況。 請注意，您必須像在head標簽中一樣包含對jQuery庫的引用。 您還可以將javascript / jQuery移到一個單獨的文件中，並僅通過引用將其包括在內。
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//alert('Document is ready');
$('#model').change(function() {
var sel = $(this).val();
if (sel == 'model2' || sel == 'model3') $('input[name=extra]').show();
});
$('input[name=btn_submit]').click(function() {
var sel = $('#model').val();
if (sel == 'model2' || sel == 'model3') {
if ($('input[name=extra]').val() == '') {
alert('Please complete all fields');
return false; //prevent submit from submitting
}else{
alert('Your entry was submitted');
}
}else{
//Model is NOT 2 or 3 so don't check
alert('Your entry was submitted without checking input field value.');
}
});
});
</script>
</head>
<body>
<select id="model">
<option value="model1">Model 1</option>
<option value="model2">Model 2</option>
<option value="model3">Model 3</option>
<option value="model4">Model 4</option>
</select>
<input type="text" name="extra" style="display:none">
<input type="submit" name="btn_submit" value="Submit It">
</body>
</html>
解決方案3
0 2013-05-16 21:22:40
選擇某個選項時，可以添加所需的類。 然后在提交時檢查所需的元素，以確保它不為空
$('#model').change(function () {
// check if it's model2 or model3
var isRequired = /model2|model3/i.test(this.value);
$('input[name=extra]').toggleClass('required',isRequired);
});
$('form').submit(function(){
// get all empty required fields
var reqEmpty = $('.required').filter(function(){
return $.trim(this.value).length === 0;
});
// if any empty required fields are found - do something
if(reqEmpty.length){
alert('empty required field');
return false;
}
});
小提琴中的紅色邊框僅是在添加所需的課程時向您顯示。
解決方案4
0 2013-05-16 21:51:20
假設您要設置required 屬性 ：
$('#model').change(function(){
var index = this.selectedIndex;
$('input[name="extra"]').prop('required', function(){
return index == 1 || index == 2;
});
});
JS小提琴演示 。
如何在使用JavaScript或jQuery選擇父選項時進行選擇必需的選擇
[英]How to make select required upon parent option selected with JavaScript or jQuery
進行多個不包含任何先前輸入的選定選項的選擇輸入
[英]Make multiple select inputs that don't contain any previous input's selected options
HTML JAVASCRIPT或PHP如何使select中的選項依賴於另一個select中選擇的選項
[英]HTML JAVASCRIPT or PHP how to make options in select dependent on option selected in another select
如何檢查表格的每一行，選擇 select 的值，而不是獲取所有可用的選項和文本輸入值
[英]How to check for each row of a table, the value of the selected select instead of getting all the available options and text input values
當“選項”不是靜態時，如何引用“選擇”列表的選定值？
[英]How do I make a reference to the selected value of a “select” list when the “options” are not static?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.