Question

我真的不知道该怎么做。有可能做这个过程吗？我想根据定量字段的用户输入更改选择选项值

<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

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

<强>更新

＆＃13;

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

＆＃13;

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

＆＃13;

说明：该演示的逻辑非常简单，只需 selectedIndex 。因此，假设您的条目是 searialized options 。因此，如果1是输入而不是选择第一个选项，则2是输入选择第二个选项，....依此类推。

第二次更新：

JSFiddle:Demo

希望它对你有所帮助。

Answer 2

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 3

使用jQuery：

＆＃13;

$(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'));
    }
  });
});

＆＃13;

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

＆＃13;

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

Answer 4

替代

在data-quantity代码中创建一个属性<option>。给它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>

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

4 个答案: