Home Ask Login Register

Developers Planet

Your answer is one click away!

Jonas Dulay February 2016

Change the select option value based on input field

I really don't know how to do it. Is it possible to do this process? I want to change the select option value based on the user input on the quant field

<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

My actual code in php

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

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

I have to make a simple calculation this is the price of the item:

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

I will multiply it based on the quantity

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

And then add the shipping fee based on the selected value.


divy3993 February 2016

I am showing you the simple demo for your question below:


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

Explanation: The demo is with very simple logic of selectedIndex. So assuming that your entries would be searialized options. So if 1 is the input than select first option, 2 is the input select the second option,.... and so on.

Second Update:


Hope that it help you.

jcubic February 2016

Using jQuery:

$(function() {
  $('#quant').keyup(function() {
    var text = $(this).val();
    var select = $('select[name="shipment"]');
    var option = select.find(':contains(' + text + ')');
    if (option.length) {
<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>

Sorry, don't know vanilla js solution.

kp singh February 2016


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


   document.getElementById('quant').addEventListener("change", function(){
      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);

Nana Partykar February 2016

An alternative

Create one attribute data-quantity in <option> tag. Give 1,2,3... value to it. And, in <script>, use change() or keyup() function.

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

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

Post Status

Asked in February 2016
Viewed 1,489 times
Voted 8
Answered 4 times


Leave an answer

Quote of the day: live life