jQuery HTML 表单处理

Posted 2023-05-09

【中文标题】jQuery HTML 表单处理

【英文标题】：jQuery HTML form processing

【发布时间】：2016-03-08 09:21:14

【问题描述】：

当一个人从一个选择中选择一个选项时，是否有任何其他方式来处理表单，它会更改其他选择中的结果。否则 Safari 浏览器不会执行我的代码。

这里是 jQuery 代码：

$(document).ready(function()


    $('select[name=nm_field_3]').click(function()
        var other_options = $('select[name=nm_field_4] option[value="120cm"]');
        var selected_option = $('select[name=nm_field_3] option:selected');
        if(selected_option.text() == 'Brown')
        
            other_options.hide();
        

        else
        
            other_options.show();
        
    );

);

这里 js 小提琴：http://jsfiddle.net/aq710agd/2/

我的意思是这可行，但并非所有浏览器都支持它。这就是我寻找正确方法的原因。

感谢您的帮助:)

【问题讨论】：

更新这个Demo，让我们了解你想要做什么

您无法从select 中隐藏options。您可以在某些浏览器中使用，但不能在 Chrome 或 IE 中使用。您需要 remove() 选项，然后在需要时将它们添加回来：请参见此处：***.com/questions/1271503/…

【参考方案1】：

您需要在“第一个”选择时收听更改事件， 并更新“秒”上的选项。

工作示例：

var other_select = $('select[name=nm_field_4]');
var other_options = $('select[name=nm_field_4] option[value="120cm"]');
//Listen to change event on the 'first' select
$('select[name=nm_field_3]').change(function () 
    //Getting the selected value after the change
    var currentValue = $(this).val();
    //Then do your logic
    if (currentValue === "Brown") 
        other_options.detach();
     else 
        other_select.append(other_options);
    

);

【讨论】：

您看到的问题是 safari 不支持 .show 和 .hide 以及 Internet Explorer。有没有其他办法？