Jquery選擇字段填充輸入字段

-2

我想從下拉列表中選擇一個選項，並使用正確的值填充輸入字段。Jquery選擇字段填充輸入字段

我要值1設置爲（$ 100）VAL 2（$ 200）

我將不能訪問數據庫來存儲的值。

<div class="row"> 
     <div class="form-group"> 
      <select class="form-control" id="costfield" name= 
      "costfield"> 
       <option value="Select Country"> Select Country</option> 
       <option value="1"> country 1</option> 
       <option value="2"> country 2</option> 
       <option value="1"> country 3</option> 
      </select> 
     </div> 
    </div> 
     <div class="form-group"> 
      <input type="estimate" class="form-control" id="exampleInputEstimate1" placeholder="Estimate"> 
     </div> 
    </div> 
    <script> 
    $("#costfield").val(); 
     $("#estimate").text("this").show(); 
    </script> 
</div>

來源

2015-09-15 bldev

如果我理解正確的問題，它應該是'$（ '＃估計'）VAL（$（「#costfield」）.VAL（））;' – Sushil

我@Sushil同意（$（'#costfield「）.val（））;' – Michel

你的輸入不能有一個'type'屬性來保存這個值「估計」，這是無效的。 –

$('[name="costfield"]').change(function() { 
    console.log("test"); 
    var cost = this.value; 
    var str = ""; 

    switch (cost) { 
     case "1": 
      str = "$100"; 
      break; 
     case "2": 
      str = "$200"; 
      break; 
    } 
    $("#exampleInputEstimate1").val(str); 
});

JSFiddle

來源

2015-09-15 17:26:37

' $（'＃exampleInputEstimate1'）' – Michel

@Michel謝謝。誤讀了。原始HTML無效。 –

我不相信這個工作的邏輯。我已經測試過了，它不會改變成本值 – bldev

您可以使用jQuery從Select中獲取值，當它發生變化時，然後相應地更改輸入的值。所以把它放在腳本標籤之間。

$('#costfield').on('change', function() { 
var value = $(this).val(); 
$('#exampleInputEstimate1').val(value); 
});

來源

2015-09-15 17:26:01

您可以將值存儲在HTML5 data-屬性爲每個<option>元素。當選項的value屬性與您指定的美元值之間沒有直接關係時，此方法非常有用。

p/s：type="estimate"不是有效的屬性值。嘗試type="text"（反正，瀏覽器會解析無效的類型爲text自動的。

// Listen to change 
 
$('#costfield').change(function() { 
 
    $('#exampleInputEstimate1').val($(this).find('option:selected').data('dollar-value')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="form-group"> 
 
    <select class="form-control" id="costfield" name="costfield"> 
 
     <option value="Select Country">Select Country</option> 
 
     <option value="1" data-dollar-value="$100">country 1</option> 
 
     <option value="2" data-dollar-value="$200">country 2</option> 
 
     <option value="1" data-dollar-value="$100">country 3</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <input type="text" class="form-control" id="exampleInputEstimate1" placeholder="Estimate" /> 
 
</div>

來源

2015-09-15 17:28:25 Terry

你可以設置你的選項值是100或200然後在下拉菜單中的任何改變下設置的值您輸入的值。

$("#costfield").on("change", function(){ 
    $("#exampleInputEstimate1").val($("#costfield").val()); 
});

如果你要保持你的選項值，因爲它們是那麼你仍然可以使用上面一樣用小的變化。（在assumpti對1將是100，2爲200，3將是300，依此類推）

$("#costfield").on("change", function(){ 
    $("#exampleInputEstimate1").val($("#costfield").val() + "00"); 
});

你也可以把它放到一個新的選項，並設置它沒有任何價值，因爲空白這樣你逼用戶選擇一些東西。或者，您可以在文檔加載時設置輸入並保留您擁有的選項數量。。又名：

<option value="" ></option>

來源

2015-09-15 17:43:18 fMont

Jquery選擇字段填充輸入字段

回答

相關問題