如果在选择中选择了特定选项，则如何进行输入

Question

仅当在<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输入。

我该怎么做呢？

Answer 1

好吧，您只能在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;
        }
    }
}

Answer 2

这是一个完全有效的示例，以演示如何使用jQuery解决这两种情况。 请注意，您必须像在head标签中一样包含对jQuery库的引用。 您还可以将javascript / jQuery移到一个单独的文件中，并仅通过引用将其包括在内。

此处为实时示例（jsFiddle）

<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>

Answer 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;
    }
});

小提琴中的红色边框仅是在添加所需的课程时向您显示。

小提琴

Answer 4

假设您要设置required 属性：

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

JS小提琴演示。

如果在选择中选择了特定选项，则如何进行输入

问题描述

4 个解决方案

解决方案1
0 2013-05-16 21:14:21

解决方案2
0 已采纳 2013-05-16 21:22:34

解决方案3
0 2013-05-16 21:22:40

解决方案4
0 2013-05-16 21:51:20

如果在选择中选择了特定选项，则如何进行输入

问题描述

4 个解决方案

解决方案1 0 2013-05-16 21:14:21

解决方案2 0 已采纳 2013-05-16 21:22:34

解决方案3 0 2013-05-16 21:22:40

解决方案4 0 2013-05-16 21:51:20

解决方案1
0 2013-05-16 21:14:21

解决方案2
0 已采纳 2013-05-16 21:22:34

解决方案3
0 2013-05-16 21:22:40

解决方案4
0 2013-05-16 21:51:20