Question

所以我有3个选择框和一个提交按钮。如果在任何选择框中未选择任何值，则单击提交按钮时不会发生任何操作。如果已在所有3个选择框中选择了值，则单击提交按钮将刷新页面，延迟时间为2秒。

这是我到目前为止所做的不起作用：

HTML

<select class="select1" name="select1">
<option value="0">-- Please Select --</option>
<option value="5">Blue</option>
<option value="6">Green</option>
<option value="7">Red</option>
</select>

<select class="select2" name="select2">
<option value="0">-- Please Select --</option>
<option value="5">big</option>
<option value="6">small</option>
<option value="7">medium</option>
</select>

<select class="select3" name="select3">
<option value="0">-- Please Select --</option>
<option value="5">1</option>
<option value="6">2</option>
<option value="7">3</option>
</select>


<input type="submit" value="something1" name="something2" onclick="refresh(2000)" class="something3" id="something4">

JS

if($(".select1" && ".select2" && ".select3")).value !== "0") {
    function refresh (timeoutPeriod){refresh = setTimeout(function(){window.location.reload(true);},timeoutPeriod);}
}

但我在这里遇到的问题是刷新不会被定义是声明不正确（onload等）。我已经环顾了几个小时并且找不到太多，或者我可能没有做正确的事情。任何帮助或指导将不胜感激。

Answer 1

您当前的代码存在一些问题：

错误使用jQuery选择器$(".select1" && ".select2" ..
- jQuery选择器使用类似选择器文本的CSS来收集多个规则
- 因为您要检查的是三个不同的值，所以您必须检查每个值一。
功能refresh()的范围和位置不明确且不必要。
jQuery没有.value属性，你必须通过.val()为jQuery对象调用它。

<script>
function refresh() {
    if( $(".select1 option:selected").val() !== "0" && 
        $(".select2 option:selected").val() !== "0" && 
        $(".select3 option:selected").val() !== "0" ) {

        setTimeOut(function(){ 
           window.location.reload();
        }, 2000 );
    }
}
</script>

Answer 2

你在一个地方错了，

if($(".select1" && ".select2" && ".select3")).value !== "0") {
 function refresh (timeoutPeriod) {
  refresh = setTimeout(function() {
   window.location.reload(true);
  },timeoutPeriod);
 }
}

这不起作用。在计算机语言中，您需要检查一个条件，然后转到另一个条件。

如果所有操作符都是bool，例如

，那么您正在使用的条件将起作用

if((bool1 && bool2 && bool3) {
  /* code executes if all three bools are true!
   */
}

所以你需要的是：

if($('.select1'.val() != '0' && 
     '.select2'.val() != '0' && 
     '.select3'.val() != 0)) {
 function refresh (timeoutPeriod) {
  refresh = setTimeout(function() { 
    window.location.reload(true);
  }, timeoutPeriod);
 }
}

这样，如果它们都没有0值，您将首先检查select1然后选择2然后选择最后一个。然后该功能将继续。否则它将保持不变。

这是算法的小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/tSDKN/2/

对不起，我还有很短的时间去祈祷！所以你可以从小提琴中获取基本代码:)我已经解释了选择如何在那里工作。

祝你好运兄弟。

Answer 3

您想要更优雅的解决方案吗？

HTML：

<select class="select1" onchange="handleChange($(this))">
<option value="0">-- Please Select --</option>
<option value="5">Blue</option>
<option value="6">Green</option>
<option value="7">Red</option>
</select>

<select class="select2" onchange="handleChange($(this))">
<option value="0">-- Please Select --</option>
<option value="5">big</option>
<option value="6">small</option>
<option value="7">medium</option>
</select>

<select class="select3" onchange="handleChange($(this))">
<option value="0">-- Please Select --</option>
<option value="5">1</option>
<option value="6">2</option>
<option value="7">3</option>
</select>

<input type="submit" onclick="tryRefresh(2000)">

JS

var selected = 0;
function handleChange($select) {
  $select.val() ? selected++ : selected--;
}

function tryRefresh(delay) {
  if (selected === 3) {
    setTimeout(refresh, delay);
  }
}

function refresh() {
  window.location.reload(true);
}

如果所有三个选择框都具有选定值，则页面刷新功能

3 个答案: