不刷新页面jQuery模糊搜索，第一种实现---动态删除、插入节点_jquery删除节点页面不刷新生效吗-优快云博客

本文链接：https://blog.youkuaiyun.com/methods2011/article/details/12058449

本文详细介绍了如何使用jQuery在不刷新页面的情况下，实现对下拉菜单中option元素的动态过滤和更新，通过代码实例展示了如何筛选并展示符合条件的选项，同时移除不符合条件的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery 对select中的option进行过滤，

提示：html中没有对select中option属性的隐藏功能，所以只能将option个删除和添加这样的操作

直接上代码：第一种方式

需要导入jquery

<html>
<head>
<title>不刷新页面jQuery模糊搜索，第一种实现---动态删除、插入节点 </title>
<script src="jquery-1.4.4.min.js" language="javascript"></script>
<script type="text/javascript">

function idChange(obj) {
    $("#select").val(obj.value.trim());
}

function inputChange(obj) {
    indexOfKeyWord(obj.value.trim());
}

//根据给的word搜索
function indexOfKeyWord(word){
    //显示的下拉框的值vlaue数组
    var arrayVal=$("#select option").map(function(){return $(this).val();});
    //显示的下拉框的text数组
    var arrayText=$("#select option").map(function(){return $(this).text();});

    //隐藏的下拉框的值的数组
    var arrayVal_hidden=$("#select_hidden option").map(function(){return $(this).val();});
    //显示的下拉框的text数组
    var arrayText_hidden=$("#select_hidden option").map(function(){return $(this).text();});

    for(var i=0;i<arrayText.length;i++){
      if(arrayText[i].indexOf(word)==-1){
        $("#select option[value='"+arrayVal[i]+"']").remove();
        $("#select_hidden").append("<option value='" +arrayVal[i] + "'>"+arrayText[i]+"</option>"); //为Select追加一个Option(下拉项)
      }
    }

    for(var j=0;j<arrayText_hidden.length;j++){
      if(arrayText_hidden[j].indexOf(word) != -1){
        $("#select_hidden option[value='"+arrayVal_hidden[j]+"']").remove();
        $("#select").append("<option value='" + arrayVal_hidden[j] + "'>"+arrayText_hidden[j]+"</option>"); //为Select追加一个Option(下拉项)
      }
    }
}
</script>
</head>
<body>
<form id="form1">
      <table class="searchContent">
        <tr>
          <td>
              <label style="float:left">
              下拉列表：
              </label>
              <select id="select" name="status" >
                <option value="8741">囧西游</option>
               <option value="8742">囧西游1</option>
               <option value="8743">囧西游12</option>
               <option value="8744">囧西游123</option>
                <option value="8731">三界封神123</option>
               <option value="8732">三界封神12</option>
               <option value="8733">三界封神1</option>
               <option value="8734">三界封神</option>
                <option selected="selected" value="872">神谕</option>
                <option value="871">搜神记</option>
               <option value="8711">搜神记0</option>
               <option value="8712">搜神记11</option>
               <option value="8713">搜神记44</option>
                <option value="870">王国印记</option>
                <option value="869">寻将Online</option>
                <option value="868">宠物风暴</option>
                <option value="867">仙魔道OL</option>
              </select>
              <select id="select_hidden" style="display:none"></select>
          </td>
          <td>根据ID精确查找：<input type="text" size="5" onchange="idChange(this)" /></td>
          <td>根据名称模糊查找：<input id="serachinput" type="text" onchange="inputChange(this)"/></td>
        </tr>
      </table>
</form>

</body>
</html>

在firefox中测试过。其它的自行测试

//这个也是去下拉框所有选项的text的值的方法，返回一个数组

var array=$("#selectId").text().split(",");

这个方法可以对js中的字符串截取

substring(0,3);

slice(0,5)

你可能会用到