2016-09-25 63 views
0

所以我有一個問題,試圖找出如何讓這個工作。我想進行下拉選擇,並且我希望下拉菜單中的所有選項都與原始輸入值一起顯示在主輸入框中。如何在原始值的主輸入中顯示其他輸入

這是我用來發送值到ajax發送到我的PHP文件的表單。

<div class="input-group" id="adv-search"> 
    <input type="text" name="input1" class="form-control" id="filter" id="searchbox" placeholder="Something..."/ required> 
       <div class="input-group-btn"> 
        <div class="btn-group" role="group"> 
         <div class="dropdown dropdown-lg"> 
          <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button> 
          <div class="dropdown-menu dropdown-menu-right" role="menu"> 
          <form class="form-horizontal" role="form"> 
          <div class="form-group"> 
          <h4 class="text-center">Advanced Search</h4> 
          <label for="filter">Option</label> 
          <select class="form-control" name="place" id="myList"> 
           <option selected></option> 
           <option value="option1">Option1</option> 
           <option value="option2">Option2</option> 
           <option value="option3">Option3</option> 
          </select> 
          </div> 
          <div class="form-group"> 
           <label for="contain">Location</label> 
           <input class="form-control" name="something1" type="text" id="list2"> 
          </div> 
          <div class="form-group"> 
           <label for="contain">Something2</label> 
           <input class="form-control" name="contain" type="text" id="list3"> 
          </div> 
          <p><br/> 
          <button type="submit" id="insideButton" name="submit" class="btn btn-primary">Advanced Search</button> 
          </form> 
          </div> 
          <button type="submit" id="buttonClass" name="submit2" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

現在我想從選擇下拉(#myList)和其它輸入值(#列表2,#項目list3)和主輸入(#filter)與值一起顯示出來輸入(#過濾器)。我的下面的代碼會按鍵顯示它們,但它會在函數中重複它。我如何讓每個輸入在#filter輸入中顯示。

$('#list2').on("input", function(){ 
    var filter = $(this).val(); 
    var myList = $('#filter').val(); 
    $('#filter').val(filter + " " + myList); 
}); 

這是我想要完成的圖片。任何和所有的幫助,不勝感激。謝謝。

Here is a picture of what I would like to accomplish.

+0

你想選擇框的jQuery中值 –

+0

您的標記是奇怪,你有一個以上的ID屬性的元素,標籤用'for'屬性在相關的輸入等附近沒有? – adeneo

+1

更改您的jQuery功能以「更改」。 https://fiddle.jshell.net/rqd9phaf/ – Tommy

回答

0

您好,如果我按照你的形象,你要得到所有選項輸入值在主搜索框,如果是這樣,你可以試試這個jQuery代碼的代碼塊正確理解

<script> 
      $(document).ready(function() { 
      $("#insideButton").click(function(e) { 
      e.preventDefault(); 
      $("#filter").val($("#list3").val()+" "+ $("#list2").val()+" 
      "+$("#myList").val()+" "+$("#filter").val()); 
      }); 
      }); 
</script> 

我只是用一個按鈕,提交選項你可以改變它作爲你的願望 如果你想提交表單選項,然後會出現一個稍微改變,你也可以寫相同的代碼

<script> 
      $(document).ready(function() { 
      $(".form-horizontal").on('submit',function(e) { 
      e.preventDefault(); 
      $("#filter").val($("#list3").val()+" "+ $("#list2").val()+" 
      "+$("#myList").val()+" "+$("#filter").val()); 
      }); 
      }); 
</script> 

希望它可以幫助你也可以檢查此琴 fiddle demo

+0

與此類似的東西。但是,如果你看看我發佈的輸入框中的圖片,它有「option4」,「option3」,「OPTION2」,「主要輸入」,我想要的是,如果用戶改變主意並選擇不同的選項在下拉框中或在其中一個選項輸入框中輸入不同的東西時,它將從輸入框中移除舊的輸入框,並將其替換爲在輸入框中選擇或鍵入的新選項。 – Stuckfornow