Question

我对java Script不太好，但试图以不同的方式学习一些东西，这个社区总是帮助我学习这些东西。我再次需要你们的帮助。下面是我的代码，我想要的是。

我在单个页面上有不同的下拉列表，使用不同的按钮在php中运行不同的查询。但我想确保drop在进行按钮点击的php查询之前应该有一些选定的值。我无法执行此任务，下面是绝对错误的示例。我想在按钮上单击“fun”我的函数应该运行，它应该检查从下拉s1中选择了正确的值，这里不需要s2值。与第二个按钮相反的是相同的。请帮助，任何想法将不胜感激。

function myFunction() {
  document.getElementById("s1").value = "required"
}

function myFunction1() {
  document.getElementById("s2").value = "required"
}

dd1:
<select id="s1">
  <option>Select one</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<br>
<br>dd2:
<select id="s2">
  <option>Select one</option>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="b">b</option>
</select>
<br>
<br>

<button onclick="myFunction()">fun</button>
<button onclick="myFunction1()">fun1</button>

Answer 1

您必须检查document.getElementById("s1").selectedIndex和...(s2)的值如下：

  function myFunction() {
    var s1 = document.getElementById("s1").selectedIndex;
    var s2 = document.getElementById("s2").selectedIndex;
    if (s1<1 && s2<1) {
      alert("Please select atleast one item from dropdowns!"); 
      return false;
    };
  }

 <html>
 <body>

dd1:<select id="s1">
    <option >Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

   <br>       <br>
dd2:<select id="s2">
    <option >Select one</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="b">b</option>
  </select>
  <br><br>

<button onclick="myFunction()">fun</button>
<button onclick="myFunction()">fun1</button>


  </body>
  </html>

Answer 2

使用jQuery可以解决问题。您只需要检查select组件的值。要实现这一点，您应首先为未选择任何内容添加值：

dd1:<select id="s1">
    <option value="0">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

   <br>       <br>
dd2:<select id="s2">
    <option value="0">Select one</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="b">b</option>
  </select>
  <br><br>

现在，当没有选择任何内容时，组件的值将为0.要检查此值，您必须执行以下操作：

function myFunction() {

    var selectedValue1 = $('#s1').val();
    var selectedValue2 = $('#s2').val();

    // check both values and do whatever
}

function myFunction1() {

    var selectedValue1 = $('#s1').val();
    var selectedValue2 = $('#s2').val();

    // check both values and do whatever
}

使用vanilla

如果您不想出于任何原因使用jQuery，则只需更改var selectedValue1 = $('#s1').val();的{{1}}。

我希望这会有所帮助：）

在不同的按钮上检查Javascript中的必填字段

2 个答案:

使用vanilla