Javascript 如果在选择中选择了特定选项，如何使输入成为必需

只有在列表中选择了特定选项时，我才需要输入字段

例如：

<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，则需要额外输入

---

如何做到这一点？

使用javascript客户端只能做到这么多。最终，您必须在服务器上强制执行此操作。要在不依赖特定于浏览器的实现或HTML5的情况下在客户端执行此操作，需要使用onsubmit事件处理程序手动检查所需的值

另外，为便于使用，请确保为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;
        }
    }
}

---

下面是一个完整的示例，演示如何使用jQuery解决这两种情况。注意，您必须像我在head标记中所做的那样包含对jQuery库的引用。您还可以将javascript/jQuery移动到一个单独的文件中，并简单地通过引用将其包括在内

---

选择某个选项后，可以添加所需的类。然后在提交时检查所需的元素，确保它不是空的

$('#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;
    }
});

fiddle中的红色边框仅用于显示添加所需类的时间

---

假设您正在尝试设置所需的属性：

---

.

你所说的输入是什么意思？你有验证码吗？如果是这样，请在验证之前检查模型下拉列表的值。是的，我的意思是我需要验证表单并使输入字段成为必需的。尝试使用jQuery验证插件。有两种方法使输入字段成为必需的。一个是甚至让它出现在页面上。另一个是验证字段中是否存在值。看我下面的例子。完美！谢谢你的帮助。如果sel='model1'| | sel=='model4'$'input[name=extra]'，我想你可以添加这个；如果用户错误地选择单击2和3，则隐藏输入^^

$('#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;
    }
});

$('#model').change(function(){
    var index = this.selectedIndex;
    $('input[name="extra"]').prop('required', function(){
        return index == 1 || index == 2;
    });
});