贝宝的多个无序列表值

Question

我有一个带有 2 个单选按钮的表单。 根据单选按钮显示无序列表（使用 js 隐藏/显示）。 这可以按需要工作。

列表用于选择服务。 当我使用第一个单选按钮“预选”选择服务时，它总是传递第二个隐藏列表的第一个值。

如果我在 2 个单独的页面中应用列表，一切正常。

我想要实现的目标：1 个页面、2 个单选按钮、1 个列表。 列表中选择的值被传递给paypal进行支付。

如您所见，我为两个列表填充了相同的字段，我相信，通过这样做，无论哪个列表可见，它都会采用选定的值。

有人知道我的逻辑哪里错了吗？

这是我的代码：

                  <div class="col-sm-12">
                     <div class="radio mt-20">
                        <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="inh" checked onclick="show1();"> In-House service </label>&nbsp;&nbsp;&nbsp;
                        <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="mob" onclick="show2();"> Mobile service</label>
                     </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group mb-10">
                       <div class="form-group">
                          <select name="form_massage" id="form_is" class="form-control">
                            <option value="In house Full body relax massage - &euro;40">Full body relax massage - &euro;40</option>
                            <option value="In house Full body strong massage - &euro;45">Full body strong massage - &euro;45</option>
                            <option value="In house Back and Neck massage - &euro;20">Back and Neck massage - &euro;20</option>
                            <option value="In house Back and Legs - &euro;25">Back and Legs - &euro;25</option>
                            <option value="In house Legs and Feet - &euro;15">Legs and Feet - &euro;15</option>
                          </select>
                          <select name="form_massage" id="form_ms" class="form-control hide">
                            <option value="Mobile - Full body relax massage - &euro;50">Full body relax massage - &euro;50</option>
                            <option value="Mobile - Full body strong massage - &euro;55">Full body strong massage - &euro;55</option>
                            <option value="Mobile - Back and Neck massage - &euro;30">Back and Neck massage - &euro;30</option>
                            <option value="Mobile - Back and Legs - &euro;35">Back and Legs - &euro;35</option>
                            <option value="Mobile - Legs and Feet - &euro;20">Legs and Feet - &euro;20</option>
                          </select>                            
                       </div>
                    </div>
                  </div>                        
                </div>

Answer 1

同名的第二个选择（或输入）实质上会覆盖第一个，使其与提交时的表单输入无关。

如果您希望第一个具有作为表单输入的效果，您需要它们具有不同的名称。

---

对于您的用例，最简单的解决方案可能是将所有选项合并到一个选择中，并为它们提供一个与您希望在何时可见的选项相对应的类（例如，class=inh，class=mob）。然后让您的 JS 代码显示/隐藏 选项，按类选择它们。