Question

我的标记看起来像这样：

<form>
  <select class="form-control" id="follower_id" name="event[task_followers_attributes][0][follower_id]">
    <option value=""></option>
    <option data-typeahead-associated-id="1" value="1" selected>Administrator</option>
    <option data-typeahead-associated-id="2" value="2">Marketing Guy</option>
  </select>
  <input type="hidden" data-typeahead-associated-id="2" name="event[followers_attributes][1][id]" value="2">  
</form>

我想找到所有具有数据属性“data-typeahead-associated-id”的表单元素。但是，如果表单元素是可选择的表单元素（例如select，单选按钮），那么我只需要data-typeahead-associated-id作为所选的表单元素。由于输入字段没有多个选项，我希望所有输入字段都与“data-typeahead-associated-id”属性匹配。

因此，在上面的示例中，我希望select选项的值为1，而不是2.我还希望输入字段的值为2.

我想到了这个似乎有效的解决方案：

$('form').find('[data-typeahead-associated-id]').not('option:not(:selected),input[type="radio"]:not(:checked),input[type="checkbox"]:not(:checked)')

但是有更稳定，更优雅的解决方案吗？

Answer 1

我不知道这个解决方案是否更有效率。但是我注意到你使用了一个双不指令，它最后是肯定指令。

我的解决方案是分成两个更简单的指示首先选择[data-typeahead-associated-id]的所有元素根据您的喜好选择第二个过滤条目（:selected，:checked，:input）
通过这种方式，您可以更好地控制元素。

尝试：

var elements = $('form').find('[data-typeahead-associated-id]');
var result = elements.filter(":selected, :checked, :input");

//Following is only to display results
$.each(result, function(index, value){
$('#result').append("<p>Index: " + index + " | Element: " + value + " | Value: " + $(value).val() +"</p>");});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select class="form-control" id="follower_id" name="event[task_followers_attributes][0][follower_id]">
    <option value=""></option>
    <option data-typeahead-associated-id="1" value="1" selected>Administrator</option>
    <option data-typeahead-associated-id="2" value="2" >Marketing Guy</option>
  </select>
  <input type="hidden" data-typeahead-associated-id="2" name="event[followers_attributes][1][id]" value="2">  
</form>

<!-- Following is only to display results -->
<div id="result">
</div>

选择所有选定的表单元素以及不可选择的表单元素

1 个答案: