使用 jQuery 根据另一个选择框制作所需的选择框

我的测试站点中有一个名为缩写的产品，如下所示

http://dev.mommyjewelry.com/initials/sideways-initial-necklace.html

现在，如果您转到该页面并选择多少个金色首字母，您将根据选择在下面显示更多选择框。因此，如果我选择 2 个首字母，我会在下方显示 2 个选择框，我们必须在其中选择首字母的字母

现在，我希望使这两个选择框成为例如此示例中的必需选项。 因此，如果我们单击"添加到购物车"按钮，则会显示一个弹出窗口，说明需要这两个选择框。 并防止进入购物车。

因此，如果我选择多少个黄金首字母作为 3，那么显示的 3 个选择框是我要制作的。

我知道当我有一个文本框而不是选择框时，我可以使用以下代码

$("#product_form").submit(function(evt) {
    var target = $("#yellow-gold").val(); var target1 = $("#white-gold").val();
    if(target == "initial-0" && target1=="initial-0"){
      alert("You must select either White Gold or Yellow Gold Necklace.");
      evt.preventDefault();
    }else{
    var number_of_charms = $("#yellow-gold").attr("selectedIndex") + 0;
     var number_of_gold = $("#white-gold").attr("selectedIndex") + 0;
     var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;
     if(number_of_charms >  fields_not_empty) {
          $(".error").show();
          alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
          evt.preventDefault();
     }else if(number_of_gold >  fields_not_empty) {
          $(".error").show();
          alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
          evt.preventDefault();
     }
    }
});

正如您在上面的代码中看到的那样，我能够使用此行在文本框时显示消息

var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;

但是在选择框的情况下如何使用它呢？