onClick復制從下拉到搜索框

Question

我是jquery的新手，我的任務是制作一個onclick函數，該函數從下拉列表中獲取值並將其輸入搜索框。 任何對此的建議將不勝感激。 我在下面列出了我當前擁有的代碼。

<script>
function populateSearch(e) {
  //alert('wibble')
  var $selector = $(e.target);
  var searchVal = $selector.attr('data-value');
  //alert($selector.attr('data-value'));

  var $originalSelects = $originalDiv.find('select');
}
</script>

<div class="col-md-6">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown Example
    <span class="caret"></span>
  </button>
  <ul class="quickSearch dropdown-menu">
    <li onclick="populateSearch(event);" data-value="Goodbye Mo">option 1</li>
    <li onclick="populateSearch(event);" data-value="Hello Mo">option 2</li>
    <li onclick="populateSearch(event);" data-value="adios Mo">option 3</li>
    <li onclick="populateSearch(event);" data-value="Mo">option 4</li>
  </ul> 
</div>

Answer 1

你快到了。 您所需要做的就是添加一個輸入元素，然后使用類似以下的命令設置其值： $("#myInput").val(searchVal);

這里myInput是輸入的ID。

另外，請注意，我已經在您的點擊處理程序中注釋掉了最后一行代碼。 這是因為$originalDiv變量未在Javascript中定義。 因此，將其保留在那里將導致錯誤。

 function populateSearch(e) { //alert('wibble') var $selector = $(e.target); var searchVal = $selector.attr('data-value'); //alert($selector.attr('data-value')); $("#myInput").val(searchVal); //var $originalSelects = $originalDiv.find('select'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="col-md-6"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown Example <span class="caret"></span> </button> <ul class="quickSearch dropdown-menu"> <li onclick="populateSearch(event);" data-value="Goodbye Mo">option 1</li> <li onclick="populateSearch(event);" data-value="Hello Mo">option 2</li> <li onclick="populateSearch(event);" data-value="adios Mo">option 3</li> <li onclick="populateSearch(event);" data-value="Mo">option 4</li> </ul> </div> <input id="myInput" type="text" /> 

Answer 2

 //bind a click handler to all the lis $('.quickSearch li').on('click', function(e){ //get the attribute value off the li clicked and put it in the target value $('#target').val(e.target.getAttribute('data-value')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-6"> <ul class="quickSearch dropdown-menu"> <li data-value="Goodbye Mo">option 1</li> <li data-value="Hello Mo">option 2</li> <li data-value="adios Mo">option 3</li> <li data-value="Mo">option 4</li> </ul> </div> <input type="text" id="target" value=""> 

Answer 3

謝謝大家為我提供一些答案。 我的經理能夠給我一些很好的建議，下面列出了他提出的解決方案：

            <script>
        function populateSearch(e) {
            var $selector = $(e.target);
            var searchVal = $selector.attr('data-value');
             $('form[name="siteSearch"]').find('input#searchPhrase').val(searchVal);
            $('form[name="siteSearch"]').submit();
        }
    </script>