Question

请忍受，使用javascript进行了全新的尝试，并尝试做一些看似简单但我无法弄清楚的事情，并且需要时间来解决。

我们正在使用一个预订表格，其中包含一个针对成人，儿童和总访客的下拉菜单。我们正在使用插件作者提供的代码来计算房费，建议的方法是隐藏“访客总数”，以使成人和儿童在前端看起来无缝。

因此，我们将其作为表单元素：

<p class="wpbc_visitors_selection">Visitors: [select visitors id:visitorstotal class:visitors "1" "2" "3" "4" "5" "6"] </p> 
<p>Adults: [select adults id:adultselector class:adults "1" "2" "3" "4"]</p>
<p>Children: [select children class:children "0" "1" "2"]</p>

然后使用以下命令将总数以表格的形式添加到“访问者”下拉列表中，以供其他地方使用（由插件作者提供），并且效果很好：

<script type="text/javascript">
        jQuery( 'select.adults').on( 'change',  wpbc_set_visitors_number );
        jQuery( 'select.children').on( 'change',  wpbc_set_visitors_number );
        function wpbc_set_visitors_number() {
            var s_adults   = jQuery('select.adults option:selected').val();
            var s_children = jQuery('select.children option:selected').val();
            var s_visitors = parseInt(s_adults) + parseInt(s_children);
    console.log( s_visitors );
                    jQuery('select.visitors option[value=' + s_visitors + ']').prop({selected: true});
            var bk_type = jQuery( "input[name^='bk_type']" ).val();
            if (typeof(showCostHintInsideBkForm) == 'function') {
                  showCostHintInsideBkForm( bk_type );
            }
        }
    </script>

然后，我们有另一个正在使用的Javascript块（某处的代码段）仅在[成人]下拉字段中选择> 2时才显示[儿童]下拉字段，以限制输入错误（不是最佳方法）我知道）：

<script type="text/javascript">
// display children field
var el = document.getElementById("adultselector1");
el.addEventListener("change", function() {
  var elems = document.querySelectorAll('#childrenfield')
  for (var i = 0; i < elems.length; i++) {
    elems[i].style.display = 'none'
  }
  if (this.selectedIndex === 2) {
    document.querySelector('#childrenfield').style.display = 'block';
  } else if (this.selectedIndex === 3) {
    document.querySelector('#childrenfield').style.display = 'block';
  }
}, false);
</script>

最后，如果“访问者总数”超过一定数量，我们要隐藏“提交”按钮。以为我们可以复制上面的内容并更改一些变量以使元素隐藏一定数量，但是不起作用。手动将“访问者总数”下拉列表单击到较高的数字时，该按钮会按原样消失，但是当由于“成人和儿童”下拉字段而导致值更改时，该操作将无效。

这就是我们用来尝试做的事情（与上面的过程类似）：

// warning if over capacity and hide submit btn
var ell = document.getElementById("visitorstotal1");
ell.addEventListener("change", function() {
  var elems = document.querySelectorAll('#booknowbtn')
  for (var i = 0; i < elems.length; i++) {
    elems[i].style.display = 'block'
  }
  if (this.selectedIndex === 5) {
    document.querySelector('#booknowbtn').style.display = 'none';
  }
}, false);

对此再次有限的知识，并感谢在此问题上的任何帮助。我知道它与addEventListener或“ change”或排序有关，但是在四处寻找解决方案之后，只是不知道自己能解决什么问题。

谢谢。

*如果将其张贴在错误的部分，或使用错误的标签，歉意，极端新手，通常只是为了查找解决方案而阅读。

根据下拉值获取要隐藏/显示的表单元素

0 个答案: