Question

我需要一些帮助来检查选择是否具有值。当我单击其中一个链接时，我需要检查该链接下方的第一个选择项是否具有值。因此，如果我单击链接nr2，然后检查该链接下的select是否具有值。我已经对此进行了各种测试，但是我无法使其工作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <a href="#" id="1" class="thelink">Clicked a link</a>
  </div>
</div>
<div>
  <select class="felkod">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="2">Value 2</option>
  </select>
</div>
<div>
  <div>
    <a href="#" id="2" class="thelink">Clicked a link</a>
  </div>
</div>
<div>
  <select class="felkod">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="2">Value 2</option>
  </select>
</div>

var test = $$(this).closest('div > #felkod');
var sel = $$(this).closest('div > select').val()

if (test.length) {
  if (sel === '') {
    app.dialog.alert("Make a selection!")
    event.preventDefault();
    return false;
  }
}

感谢任何输入，谢谢。

我可以使用它：

var sel = $(this).parent().parent().next().find('select').val();
            if (sel.length===0) {
               alert("You must select")
            }

Answer 1

如果可以更改HTML结构，以使链接和选择都在一个公共容器中（与其他链接和选择的容器分开），这将有所帮助。用您当前的结构来做到这一点是可能，但很脆弱：

$$(".thelink").on("click", function() {
    var select = $(this).parent().parent().next().find("select");
    //...
});

或具有事件委托：

$$(document.body).on("click", ".thelink", function() {
    var select = $(this).parent().parent().next().find("select");
    //...
});

请注意，我假设$$是您代码中对jQuery的引用。

但是，如果可以在它们周围放一个包装纸，就像这样：

<div class="wrapper">
  <div>
    <div>
      <a href="#" id="1" class="thelink">Clicked a link</a>
    </div>
  </div>
  <div>
    <select id="felkod">
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
      <option value="2">Value 2</option>
    </select>
  </div>
</div>
<div class="wrapper">
  <div>
    <div>
      <a href="#" id="2" class="thelink">Clicked a link</a>
    </div>
  </div>
  <div>
    <select id="felkod">
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
      <option value="2">Value 2</option>
    </select>
  </div>
</div>

您可以更强大地做到这一点：

$$(".thelink").on("click", function() {
    var select = $(this).closest(".wrapper").find("select");
    //...
});

或具有事件委托：

$$(document.body).on("click", ".thelink", function() {
    var select = $(this).closest(".wrapper").find("select");
    //...
});

旁注：id值必须在文档中必须是唯一的。您不止一次重复使用相同的id（felkod）。

Answer 2

第一个id应该是唯一的，两个选择元素不能使用相同的id。因此我将node修改为虚拟属性以引用该元素。

var values = {};

$('.thelink').on('click', function(){
  if (!!values[$(this).attr('id')]) {
    window.alert("Done");
  }
  else{  
    window.alert("Make a selection!");
  } 
  
  event.preventDefault();
    return false;
});

$('select').on('change', function(a,b){
  values[$(this).attr('node')] = $(this).val();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <a href="#" id="first" class="thelink">Clicked a link</a>
  </div>
</div>
<div>
  <select node="first">
    <option value=""></option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="2">Value 2</option>
  </select>
</div>
<div>
  <div>
    <a href="#" id="second" class="thelink">Clicked a link</a>
  </div>
</div>
<div>
  <select node="second">
    <option value=""></option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="2">Value 2</option>
  </select>
</div>

如何检查.closest select是否具有jQuery值？

2 个答案: