使用 javascript 问题在文本框上选择值

Question

我尝试使用我的popover selected list item显示文本框，它不显示，请问这是怎么回事？请帮我解决这个问题，我尝试这样做但没有解决这个问题，看看代码这是结构，你可以理解它

我的代码部分 Html

$(document).ready(function() {
     $('.popr').popr();
});

$(document).on('click', '#feugait', function () {
     alert('Feugait');
});
$(document).ready(function() {
     $('[data-toggle="popover"]').popover();

     $('[data-toggle="popover"]').on("click",function(){
       $("#messageTextBox").val($(this).find("div").text());
     });
});


(function($) {

     $.fn.popr = function(options) {

          var set = $.extend( {

               'speed'        : 200,
               'mode'         : 'bottom'

          }, options);

          return this.each(function() {

               var popr_cont = '.popr_container_' + set.mode;
               var popr_show = true;

               $(this).click(function(event)
               {
                    $('.popr_container_top').remove();
                    $('.popr_container_bottom').remove();

                    if (popr_show)
                    {
                         event.stopPropagation();
                         popr_show = false;
                    }
                    else
                    {
                         popr_show = true;
                    }

                    var d_m = set.mode;
                    if ($(this).attr('data-mode'))
                    {
                         d_m = $(this).attr('data-mode')
                         popr_cont = '.popr_container_' + d_m;
                    }

                    var out = '<div class="popr_container_' + d_m + '"><div class="popr_point_' + d_m + '"><div class="popr_content">' + $('div[data-box-id="' + $(this).attr('data-id') + '"]').html() + '</div></div></div>';

                    $(this).append(out);

                    var w_t = $(popr_cont).outerWidth();
                    var w_e = $(this).width();
                    var m_l = (w_e / 2) - (w_t / 2);

                    $(popr_cont).css('margin-left', m_l + 'px');
                    $(this).removeAttr('title alt');

                    if (d_m == 'top')
                    {
                         var w_h = $(popr_cont).outerHeight() + 39;
                         $(popr_cont).css('margin-top', '-' + w_h + 'px');
                    }

                    $(popr_cont).fadeIn(set.speed);
               });

               $('html').click(function()
               {
                    $('.popr_container_top').remove();
                    $('.popr_container_bottom').remove();
                    popr_show = true;
               });
          });
     };

})(jQuery);

.popr
{
     cursor: pointer;
}
.popr a
{
     color: #333;
     text-decoration: none;
     border: 0;
}
.popr-box
{
     display: none;
}
.popr_content
{
     background-color: #fff;
     padding: 7px 0;
     margin: 0;width: 200px;
    height: auto;
}
.popr-item
{
    font-family: sans-serif;
     color: #333;    text-align: center;
     font-size: 16px;
     padding: 4px 29px 5px 29px; border-bottom: solid 1px #fbeeee;
}
.popr-item:hover
{
     color: #333;
     background-color: #dcdcdc;
}

.popr_container_bottom
{
     display: none;
     position: absolute;
     margin-top: 10px;
     box-shadow: 2px 2px 5px #f9f9f9;
     z-index: 1000;
}
.popr_container_top
{
     display: none;
     position: absolute;
     box-shadow: 2px 2px 5px #f9f9f9;
     z-index: 1000;
}
.popr_point_top
{
     position: relative;
 background: #fff;
 border: 1px solid #dcdcdc;
}
.popr_point_top, .popr_point_bottom {
    position: relative;
    background: #fff;
   border-radius:  12px;
}
.popr_point_top:after, .popr_point_top:before
{
 position: absolute;
 pointer-events: none;
 border: solid transparent;
 top: 100%;
 content: "";
 height: 0;
 width: 0;
}
.popr_point_top:after
{
 border-top-color: #fff;
 border-width: 8px;
 left: 50%;
 margin-left: -8px;
}
.popr_point_top:before
{
 border-top-color: #dcdcdc;
 border-width: 9px;
 left: 50%;
 margin-left: -9px;
}
.popr_point_bottom:after, .popr_point_bottom:before
{
 position: absolute;
 pointer-events: none;
 border: solid transparent;
 bottom: 100%;
 content: "";
 height: 0;
 width: 0;
}
.popr_point_bottom:after
{
 border-bottom-color: #fff;
 border-width: 8px;
 left: 50%;
 margin-left: -8px;
}
.popr_point_bottom:before
{
 border-bottom-color: #dcdcdc;
 border-width: 9px;
 left: 50%;
 margin-left: -9px;
}
.popover-title {
  text-align: center; color: red;
}

.custom-popover li {
  border: none!important;
  text-align: center;
}

.custom-popover li:nth-child(2) {
  border-top: 1px solid #ccc!important;
}

.custom-popover li:last-child {
  border-top: 1px solid #ccc!important;
}
#title-pop {font-size: 12px; color: #b89981;}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <div class=" popr form-group" data-id="1">
     <a href="#" data-placement="bottom"  title="Bill Category"><input class="form-control input-sm" id="messageTextBox" type="text" placeholder="Select category">
     </a>
     </div>


<div class="form-group">
<input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>

<div class="form-group">
<input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>

<div class="form-group">
<input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>




<!-- loaded popover content -->
<div id="popover-section selectBox">
  <div class="selectBox" class="popr-box" data-box-id="1">
<div id="title-pop" class=" popr-item">Bill category
</div>
<a href="#" title="Menu" data-toggle="popover" data-trigger="hover"><div class="popr-item">Staff Payment
</div></a>
  <a href="#" title="Menu" data-toggle="popover" data-trigger="hover"><div class="popr-item">Food and Beverage

</div></a>
<a href="#" title="Menu" data-toggle="popover"  data-trigger="hover"><div class="popr-item">Car rent
</div></a>
  </div>

</div>

Answer 1

ID 不应包含 space </code> 你只是删除 <code>category :

<input class="form-control input-sm" id="messageTextBox" type="text" placeholder="Select category">

同样的注释也适用于 id="popover-sectio selectBox"。

注意： 您正在将 onchange 事件附加到 div 并尝试访问属性 value的 div，从那以后什么都没做。

希望这对您有所帮助。

Answer 2

你需要知道的是，元素 id 在页面上可以只有一个，但你可以有很多 class，你调用 jQuery 插件 .popr() 而不是定义好后调用。

(function($) {
  $.fn.popr = function(options) {
    var set = $.extend({
      'speed': 200,
      'mode': 'bottom'
    }, options);

    return this.each(function() {

      var popr_cont = '.popr_container_' + set.mode;
      var popr_show = true;

      $(this).click(function(event) {
        $('.popr_container_top').remove();
        $('.popr_container_bottom').remove();

        if(popr_show) {
          event.stopPropagation();
          popr_show = false;
        }
        else {
          popr_show = true;
        }

        var d_m = set.mode;
        if($(this).attr('data-mode')) {
          d_m = $(this).attr('data-mode')
          popr_cont = '.popr_container_' + d_m;
        }

        var out = '<div class="popr_container_' + d_m + '"><div class="popr_point_' + d_m + '"><div class="popr_content">' + $('div[data-box-id="' + $(this).attr('data-id') + '"]').html() + '</div></div></div>';

        $(this).append(out);

        var w_t = $(popr_cont).outerWidth();
        var w_e = $(this).width();
        var m_l = (w_e / 2) - (w_t / 2);

        $(popr_cont).css('margin-left', m_l + 'px');
        $(this).removeAttr('title alt');

        if(d_m == 'top') {
          var w_h = $(popr_cont).outerHeight() + 39;
          $(popr_cont).css('margin-top', '-' + w_h + 'px');
        }

        $(popr_cont).fadeIn(set.speed);
      });

      $('html').click(function() {
        $('.popr_container_top').remove();
        $('.popr_container_bottom').remove();
        popr_show = true;
      });
    });
  };

})(jQuery);

$(document).ready(function() {
  $('.popr').popr();
  $('[data-toggle="popover"]').popover();

  $(document).on("click", '[data-toggle="popover"]', function() {
    $("#messageTextBox").val($(this).text());
  });
  $(document).on('click', '#feugait', function() {
    alert('Feugait');
  });
});

.popover-section{display:none}
.popr {
  cursor: pointer;
}

.popr a {
  color: #333;
  text-decoration: none;
  border: 0;
}

.popr-box {
  display: none;
}

.popr_content {
  background-color: #fff;
  padding: 7px 0;
  margin: 0;
  width: 200px;
  height: auto;
  box-shadow: 1px 2px 2px #e4acac;
  border:1px solid #eee
}

.popr-item {
  font-family: sans-serif;
  color: #333;
  text-align: center;
  font-size: 16px;
  padding: 4px 29px 5px 29px;
  border-bottom: solid 1px #fbeeee;
}

.popr-item:hover {
  color: #333;
  background-color: #dcdcdc;
}

.popr_container_bottom {
  display: none;
  position: absolute;
  margin-top: 10px;
  box-shadow: 2px 2px 5px #f9f9f9;
  z-index: 1000;
}

.popr_container_top {
  display: none;
  position: absolute;
  box-shadow: 2px 2px 5px #f9f9f9;
  z-index: 1000;
}

.popr_point_top {
  position: relative;
  background: #fff;
  border: 1px solid #dcdcdc;
}

.popr_point_top,
.popr_point_bottom {
  position: relative;
  background: #fff;
  border-radius: 12px;
}

.popr_point_top:after,
.popr_point_top:before {
  position: absolute;
  pointer-events: none;
  border: solid transparent;
  top: 100%;
  content: "";
  height: 0;
  width: 0;
}

.popr_point_top:after {
  border-top-color: #fff;
  border-width: 8px;
  left: 50%;
  margin-left: -8px;
}

.popr_point_top:before {
  border-top-color: #dcdcdc;
  border-width: 9px;
  left: 50%;
  margin-left: -9px;
}

.popr_point_bottom:after,
.popr_point_bottom:before {
  position: absolute;
  pointer-events: none;
  border: solid transparent;
  bottom: 100%;
  content: "";
  height: 0;
  width: 0;
}

.popr_point_bottom:after {
  border-bottom-color: #fff;
  border-width: 8px;
  left: 50%;
  margin-left: -8px;
}

.popr_point_bottom:before {
  border-bottom-color: #dcdcdc;
  border-width: 9px;
  left: 50%;
  margin-left: -9px;
}

.popover-title {
  text-align: center;
  color: red;
}

.custom-popover li {
  border: none!important;
  text-align: center;
}

.custom-popover li:nth-child(2) {
  border-top: 1px solid #ccc!important;
}

.custom-popover li:last-child {
  border-top: 1px solid #ccc!important;
}

#title-pop {
  font-size: 12px;
  color: #b89981;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  
<div class=" popr form-group" data-id="1">
  <a href="#" data-placement="bottom" title="Bill Category">
    <input class="form-control input-sm" id="messageTextBox" type="text" placeholder="Select category">
  </a>
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>

<!-- loaded popover content -->
<div class="popover-section selectBox">
  <div class="selectBox" class="popr-box" data-box-id="1">
    <div id="title-pop" class=" popr-item">Bill category
    </div>
    <a href="#" title="Menu" data-toggle="popover" data-trigger="hover">
      <div class="popr-item">Staff Payment
      </div>
    </a>
    <a href="#" title="Menu" data-toggle="popover" data-trigger="hover">
      <div class="popr-item">Food and Beverage

      </div>
    </a>
    <a href="#" title="Menu" data-toggle="popover" data-trigger="hover">
      <div class="popr-item">Car rent
      </div>
    </a>
  </div>

</div>

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <div class=" popr form-group" data-id="1">
    <a href="#" data-placement="bottom"  title="Bill Category"><input class="form-control input-sm" id="messageTextBox" type="text" placeholder="Select category">
    </a>
    </div>

<!-- loaded popover content -->
<div id="popover-section selectBox">
  <div class="selectBox" class="popr-box" data-box-id="1">
<div id="title-pop" class=" popr-item">Bill category
</div>
  <a href="#" title="Menu" data-toggle="popover" data-content="Menu Item 1" data-trigger="hover"><div class="popr-item">Menu Item 1</div></a>
  <a href="#" title="Menu" data-toggle="popover" data-content="Menu Item 2" data-trigger="hover"><div class="popr-item">Menu Item 2</div></a>
  <a href="#" title="Menu" data-toggle="popover" data-content="Menu Item 3" data-trigger="hover"><div class="popr-item">Menu Item 3</div></a>
  </div>

</div>
</div>


<script>
$(document).ready(function() {
     $('[data-toggle="popover"]').popover();
     
     $('[data-toggle="popover"]').on("click",function(){
       $("#messageTextBox").val($(this).find("div").text());
     });
});


 
</script>

</body>
</html>

检查这个。

使用 javascript 问题在文本框上选择值

selected value on textbox using javascript issue

javascript

twitter-bootstrap

popover