首页 > 解决方案 > 如何使用jquery取消选择变量中的选定选择框

问题描述

我有一个场景,我想取消选择 jquery 中变量内所有选定的选择框。下面是我的 html 和 jquery 代码。

我只是想要当我单击一个按钮并获取变量中的所有 html 然后想要取消选择所有选定的选择框并将其再次绑定到 jquery 中的变量中时。下面是我的代码。请任何人帮助我。

提前致谢。

var html = "<tr>" + '<input type = "hidden"  name = "translator_approved_for_id[]" value="-1">' + $("#add_more_service").html() + '</tr>';

$(html).find("option:selected").removeAttr('selected', '');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<tr><input type="hidden" name="translator_approved_for_id[]" value="-1">
  <td>
    <select id="translator_service1" name="translator_service[]" class="form-control">
      <option value="select">--select--</option>
      <option value="Annotation">Annotation</option>
      <option value="Assessment" selected="selected">Assessment</option>
      <option value="Coding">Coding</option>
      <option value="Corporate Training">Corporate Training</option>
    </select>
  </td>
  <td>
    <select id="translator_source_language1" name="translator_source_language[]" class="form-control">
      <option value="select">--select--</option>
      <option value="Abkhazian">Abkhazian</option>
      <option value="Achinese">Achinese</option>
      <option value="Acoli" selected="selected">Acoli</option>
      <option value="Adangme">Adangme</option>
      <option value="Afar">Afar</option>
    </select>
  </td>
  <td>
    <select id="translator_target_language1" name="translator_target_language[]" class="form-control">
      <option value="select">--select--</option>
      <option value="Abkhazian">Abkhazian</option>
      <option value="Achinese">Achinese</option>
      <option value="Acoli">Acoli</option>
      <option value="Adangme">Adangme</option>
      <option value="Afar" selected="selected">Afar</option>
      <option value="Afrikaans">Afrikaans</option>
      <option value="Akan">Akan</option>
    </select>
  </td>
  <td>
    <select id="translator_industry" name="translator_industry[]" class="form-control">
      <option value="">select</option>
      <option value="Agriculture">Agriculture</option>
      <option value="Automobiles">Automobiles</option>
      <option value="Aviation" selected="selected">Aviation</option>
      <option value="Banking">Banking</option>
    </select>
  </td>
  <td>
    <input type="button" value="Add" onclick="show_approved_clients('14','ODk3NQ==')">
  </td>
  <td><input type="button" value="Remove" onclick="$(this).parent().parent().remove();"></td>
</tr>

标签: javascriptjqueryhtml

解决方案


您需要html在删除属性后更新变量,.end()以结束最近的过滤操作并返回匹配的元素集,即$(html) 然后用于.prop()获取outerHTML属性。

html = $(html)
    .find("option:selected") 
    .removeAttr('selected') //Removes selected attribute 
    .end() //End the most recent filtering operation i.e. target back
    .prop('outerHTML'); //Get outerHTML of element

推荐阅读