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

あなたにいくつかの答えを私に提供するためのみんなに感謝します。私のマネージャーは私に良い助言をしてくれました。私は彼が下で提案した解決策を挙げました：

  <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> 

Answer 2

あなたはほぼあります。入力要素を追加し、その値を次のように設定するだけです。$("#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 3

//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="">