Jquery表单onchange选择值改变

Posted 2023-03-14

【中文标题】Jquery表单onchange选择值改变

【英文标题】：Jquery form onchange select values changing

【发布时间】：2012-04-11 19:27:32

【问题描述】：

我正在寻找解决此问题的最佳方法。我有一个简单的商店逻辑问题。有 2 个选择元素，size 和 color。我想让它们依赖于数据（现在是示例数据，但稍后它将来自数据库） - 大小将决定客户可以看到哪些颜色选项（隐藏不必要的选项）。

第一个问题是，当我进行更改事件时，我想隐藏文档准备好的默认显示元素，它仍然可见（我必须再次将颜色更改为与打开下拉列表不同的颜色，然后它将不可见)。

第二个是我正在寻找最灵活的解决方案，因为我对我的有疑问。代码如下：

       var rozmiar = new Array("S", "M", "L", "XL", "XXL");
   var kolor = new Array("Czerwony", "Niebieski", "Zielony", "Biały", "Czarny");
   var opcje = new Array( rozmiar, kolor);

        $(document).ready(function()
        $('.form1').change(function()
                $('.form2 option').show();

                var selectSelector = function(z)
                    selectSelector = $('select.form2 option[value='+kolor[z]+']').hide();
                ;

                wybranyRozmiar = $(this).val();
                    if(wybranyRozmiar == rozmiar[0])
                        selectSelector(0);
                    
                    if(wybranyRozmiar == rozmiar[1])
                        selectSelector(1);
                    
                    if(wybranyRozmiar == rozmiar[2])
                        selectSelector(2);
                    
                    if(wybranyRozmiar == rozmiar[3])
                        selectSelector(3);
                    
                    if(wybranyRozmiar == rozmiar[4])
                        selectSelector(4);
                    
            );
        );

【问题讨论】：

您介意分享您的一些代码吗？

刚做完，我也在考虑如何从我的选择器中制作变量，使其更短

@Malyo，请仅发布与问题相关的代码，而不是所有内容

@Malyo，我认为您需要分解您的问题并将其发布为不同的问题。

好的，我会尽量简化我的问题

【参考方案1】：

我只回答我理解的部分。

您可以使用 switch 来代替使用多个 if 语句

switch(selectsize) 
   case rozmiar[1]:
       $('select.form2 option[value='+color[2]+']').hide();
       break;
   //case <another>"
       //break;

【讨论】：

我正在考虑，但是switch真的更快吗？

@Malyo，请参考this。 ;)

我可以在 switch 中使用比较吗？像 case (wybranyRozmiar == rozmiar[0]) - 因为它对我的代码至关重要

@Malyo，我不建议这样做，因为从语义上讲这是错误的。 Switch 用于在一个表达式上处理多个版本的情况。

【参考方案2】：

这是我理解的需要做的事情。根据.form1中所选选项的索引，从.form2中选择对应的选项。

$('select.form1').change(function (i) 
  var selectedIndex = $('select.form1 option:selected').index();
  $('select.form2 option:eq(' + selectedIndex + ')').attr('selected', 'selected');
);

D3m0 : http://jsbin.com/azilow