javascript - 针对不同的下拉菜单发出警报？

Question

如果用户无法从特定下拉菜单中做出选择，我将使用下面的代码来触发警报。

  <script>
          function selection(){    
            var sel = document.getElementById('product_configure_variants');    
            var selectedText = sel.options[sel.selectedIndex].text;
            if (selectedText.startsWith("Make a choice...")) {
               alert('PLEASE MAKE ALL ORDER FORM SELECTIONS');
               return false;
            }
            return true;
         }
    </script> 

上面的代码工作得很好。但现在我想对其他下拉菜单做同样的事情，但这给我带来了一个问题。这些下拉菜单的 ID 各不相同。 ID 如下所示:id="product_configure_custom_2197256"每个下拉菜单的 ID 号都不同。它们是由网上商店后台生成的。

如何将上面的代码与这些不同的下拉列表 ID 一起使用？

Answer 1

你可以通过id使用 in 函数。在 html 中应用该函数，如 selection(this.id)如果相同的元素 id 其他元素 id 尝试 selection(thatelementid)

function selection(id){    
            var sel = document.getElementById(id);    
            var selectedText = sel.options[sel.selectedIndex].text;
            if (selectedText.startsWith("Make a choice...")) {
               alert('PLEASE MAKE ALL ORDER FORM SELECTIONS');
               return false;
            }
            return true;
         }

示例代码

function selection(id){    
      console.log(id)
                var sel = document.getElementById(id);    
                var selectedText = sel.options[sel.selectedIndex].text;
                //f (selectedText.startsWith("Make a choice...")) {
                   alert('PLEASE MAKE ALL ORDER FORM SELECTIONS');
                   return false;
                //}
                return true
                
                }

<select id="check1" onchange="selection(this.id)">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<select id="check2" onchange="selection(this.id)">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<select id="check3" onchange="selection(this.id)">
<option>one</option>
<option>two</option>
<option>three</option>
</select>