Question

我正在尝试从下拉列表中选择一个选项，并使用正确的值填充输入字段。

我想将值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>

Answer 1

您可以将值存储在每个data-元素的HTML5 <option>属性中。当期权的value属性与您分配给它的美元价值之间没有直接关系时，此方法很有用。

p / s：type="estimate"不是有效的属性值。试试type="text"（无论如何，浏览器会自动将无效类型解析为text。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用jQuery在Select更改时获取值，然后相应地更改输入的值。所以把它放在脚本标签之间。

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

Answer 3

<tr>
    <td id="TdPhyAddress2" style="float:left" class="style10" colspan="2">
            <input id="txt1"runat="server" Height="20px" Width="476px"></input>
    </td>

    <td style="float:right">
            <asp:label id="lbl1" Runat="server"></asp:label>
    </td>
</tr>

JSFiddle

Answer 4

您可以将选项值设置为100或200，然后在下拉列表中的任何更改中将输入值设置为该值。

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

如果您想保留您的选项值，那么您仍然可以使用与上述相同的更改。（假设1将为100,2将为200,3将为300，依此类推）

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

此外，您可能想要添加一个新选项并将其设置为空白而没有任何值，这会强制用户选择某些内容。或者您可以设置文档加载的输入并保留您拥有的选项数。 AKA：

<option value="" ></option>

Jquery Select字段填充输入字段

4 个答案: