分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

jquery代码修改input的value值,而页面上input框的值没有改变的解决办法

发布时间:2023-09-06 02:07责任编辑:沈小雨关键词:暂无标签

问题描述:

在搜索框中输入一些字符,并且点击搜索框右边的五角星做收藏操作时,打开的弹框中Save Search:后面的input中的值被赋值了外面搜索框的值,但是当此次操作完成之后,再次做同样的操作,弹框中Save Search:后面的input中的值却没有随着外面搜索框中值得改变而改变

解决办法:

代码中使用了attr来对input的value做赋值,而attr主要用于对input的属性值做赋值

正确的办法是使用prop来替换attr

 代码如下:

html:

<div id="searchForAssets" class="" style="display:inline-block;">
      <input class="form-control mainSearchBox" id="searchbox" placeholder="Search">
     <button id="loadFilteredImages" title="Search" class="btn btn-primary btn-sm searchbutton glyphicon glyphicon-search"></button>
     <span class="glyphicon glyphicon-star-empty toolicon" id="filterOptions" title="Save Search"></span>
      <ul id="mainSearchBoxList"></ul>
</div>

<div id="filterOptionMenus" class="toolmenu">
          <ul class="saveFilterWrap">
            <li class="saveFilter">
              <div class="form-group row">
                <div class="col-xs-3 col-custom" id="saveSearchLabel"><label for="newFavoriteName">Save Search: </label></div>
                <div class="col-xs-6 col-custom"><input class="form-control" id="newFavoriteName" maxlength="100" placeholder="Type filter name..."></div>
                <div class="col-xs-3 col-custom" id="saveFilterButton">
                  <a id="btnSaveFavorite" class="btn btn-primary" style="width:70px;">Save</a>
                </div>
              </div>
            </li>
            <li class="separator"></li>
          </ul>
          <div class="form-group">
            <label for="searchFilter">Saved Searches:</label><br />
            <input class="form-control toolmenu" id="searchFilter" placeholder="Filter">
          </div>
          <ul class="toolmenu"></ul>
        </div> 

 jquery代码:

$(‘#filterOptions‘).click(function (e) {
          e.preventDefault();
          e.stopPropagation();
          $(‘.popover.fade.bottom.in‘).hide();
          if ($(‘#filterOptionMenus‘).is(‘:visible‘)) {
            $("#filterOptions").css({ "background-color": "initial", "color": "#2e6da4" });
            $(‘#filterOptionMenus‘).hide();
            $(‘#filterSelectionsPane‘).hide();
          } else {
            $("#newFavoriteName").prop("value", $("#searchbox").val());
            $(‘#filterOptionMenus‘).show();
            $("#filterOptions").css({ "background-color": "#2e6da4", "color": "white" });
           
            $(‘#searchFilter‘).val(‘‘);
            GetSavedFilters($(this), ‘‘);
          }
        });

jquery代码修改input的value值,而页面上input框的值没有改变的解决办法

原文地址:https://www.cnblogs.com/fuhuirong/p/10010634.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved