Question

如果选择了正确的下拉项目，如何显示所需的输入文本框。

示例：

如果选择是，则会询问有关域的详细信息。

<label for="domainRequired">Domain required: </label>
<select name="domainRequired">
    <option value="pleaseSelect">Please Select</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
</select>

更新

HTML：

<label for="domainRequired">Domain required: </label>
            <select name="domainRequired">
                <option value="pleaseSelect">Please Select</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
            <label for="domaintobereged">Domain:</label><input name="domaintobereged" id="domaintobereged" type="text" placeholder="http://"/>

jQuery的：

<script type="text/javascript">
    $(document).ready(function() {
        $('#domainRequired').change(function() {
            var $domain = $('#domaintobereged');
            if ($(this).val() == 'yes') {
                $domain.show();
            } else {
                $domain.hide();
            }
        });
     });
    </script>

我已将jQuery加载到</body>标记上方的页脚中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="http://#.co.nz/_assets/js/jquery-1.7.2.min.js"><\/script>')</script>

Answer 1

假设您已将相应的ID添加到您的元素中 - 主要工作可以完成：

$('#domainRequired').change(function() {
    var $domain = $('#domain');
    if ($(this).val() == 'yes') {
        $domain.show();
    } else {
        $domain.hide();
    }
});

甚至

$('#domainRequired').change(function() {
    $('#domain').toggle($(this).val() == 'yes');
});

实例：http://jsfiddle.net/zerkms/3XYMT/＆amp; http://jsfiddle.net/zerkms/3XYMT/1

Answer 2

$('select[name="domainRequired"]').change(function(e){
    if(e.target.value === 'yes') {
        // Do stuff
    }
});

Answer 3

查看.change()。

大致使用如下：

$("[name=domainRequired]").change(function()
{
    // Show a text box if YES was selected (perhaps using .val() ?)

});

Answer 4

跨浏览器解决方案：

var $select = $('select[name="domainRequired"]');
$select.change(function() {
    if ($select.find('option:selected').val() == 'yes') {
        // make inputs required
    } else {
        // make inputs optional
    }
});

jQuery选项选择

4 个答案: