根据输入字段更改选择选项值

Question

我真的不知道该怎么做。是否可以执行此过程？ 我想根据 quant 字段上的用户输入更改选择选项值

<input type="number" name="quant" id="quant" /> // for example I enter 2
<select name="shipment" disable>
 <option value="100"> 100 per 1 item </option>
 <option value="150"> 150 per 2 item </option> //this must be selected
</select>

我在php中的实际代码

    <select name="shipment" id="">
<?php 
foreach($shipment as $num => $price)
{
    if($num != NULL || $price !=NULL)
    {
?>              
<option value="<?php echo "{$price}"?>">
    <?php echo "{$price}"." for "."{$num}"." item";?></option>
<?php 
    }
}
?>

</select>
<h4 style="padding:0px;margin:0px;float:left;margin-top:10px;"  class="col-md-3" >Quantity: </h4>
<div class="col-md-9" style="padding-left:0px;"><input  type="number"  name="quant" onblur="multiply.call(this,this.form.elements.price.value,this.form.elements.quant.value)"
 min="1" max="10" placeholder="2" style="height:2em;margin:3px;"></div>

我必须做一个简单的计算，这是物品的价格：

<h4 style="padding:0px;margin:0px;float:left;"  class="col-md-12" >Sale Price: ₱<font color='red'><?php $price= number_format(intval($shop_item_orig_price-($shop_item_orig_price*($shop_item_sale/100)))); echo $price;?> </font> </h4>

我会根据数量乘以它

    <input  type="number"  name="quant" onblur="multiply.call(this,this.form.elements.price.value,this.form.elements.quant.value);myFunction(this.value)"
 min="1" max="10" placeholder="2" style="height:2em;margin:3px;">

然后根据所选值添加运费。

Answer 1

HTML

<input type="number" name="quant" id="quant" />
<select name="shipment" disable>
  <option value=""></option>
  <option value="100"> 100 per 1 item </option>
  <option value="150"> 150 per 4 item </option>
  <option value="150"> 150 per 5 item </option> 
  <option value="150"> 150 per 2 item </option>
  <option value="150"> 150 per 3 item </option>
</select>

JavaScript

   document.getElementById('quant').addEventListener("change", function(){
      multiply(this.form.elements.price.value,this.form.elements.quant.value);
      var value = parseInt(this.value, 10),
          selectEle = document.getElementsByTagName('select')[0],
          options = selectEle.options,
          selectedNum = 0;
      for(var i = 0; i < options.length; i++) {
        //checking the exact string with spaces (" " + value + " ")
        if(options[i].textContent.indexOf(" " + value + " ") > -1) {
            selectedNum = i;
        }
     }
     selectEle.selectedIndex = selectedNum ? selectedNum : 0;   
}, false);

Answer 2

我正在向您展示以下问题的简单演示：

更新

function myFunction(quantValue)
{
  var shipmentOption = document.getElementById("shipmentSelect");
  shipmentOption.selectedIndex = quantValue - 1;
}

<input  type="number" name="quant" placeholder="2" onblur="myFunction(this.value)"/>

<select name="shipment" id="shipmentSelect">
 <option value="100"> 100 per 1 item </option>
 <option value="150"> 150 per 2 item </option> //this must be selected
</select>

说明：该演示的逻辑非常简单，selectedIndex。因此，假设您的条目将是序列化选项。所以如果1是输入而不是选择第一个选项，2是输入选择第二个选项，....等等。

第二次更新：

JSFiddle:Demo

希望对你有帮助。

Answer 3

另一种选择

在<option> 标签中创建一个属性data-quantity。赋予它 1,2,3... 的价值。并且，在<script> 中，使用change() 或keyup() 函数。

<select name="shipment" id='selectbox'>
    <option value="100" data-quantity="1"> 100 per 1 item </option>
    <option value="150" data-quantity="2"> 150 per 2 item </option> 
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.quantity').change(function(){
            var quant= $('.quantity').val();
            $("#selectbox").find("option[data-quantity=" + quant + "]").attr('selected', 'selected').siblings().removeAttr('selected');
        });
});
</script>

Answer 4

使用 jQuery：

$(function() {
  $('#quant').keyup(function() {
    var text = $(this).val();
    var select = $('select[name="shipment"]');
    var option = select.find(':contains(' + text + ')');
    if (option.length) {
      select.val(option.attr('value'));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="quant" id="quant" />
<select name="shipment" disable>
 <option value="100"> 100 per 1 item </option>
 <option value="150"> 150 per 2 item </option>
</select>

抱歉，不知道 vanilla js 解决方案。