Change the select option value based on input field

Question

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

My actual code in 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>

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.

What output you want ? Select dropdown value changes to what ? — Nana Partykar
– Nana Partykar, Commented Feb 8, 2016 at 9:21
@NanaPartykar for example I enter 2 on my input field The select option value will be 150 for 2 item if i enter 1 The select option value will be 100 for 1 item — Jonas Dulay
– Jonas Dulay, Commented Feb 8, 2016 at 9:25

divy3993 · Accepted Answer · 2016-02-08 11:31:43Z

2

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

UPDATE

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>

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:

JSFiddle:Demo

Hope that it help you.

edited Feb 8, 2016 at 11:31

answered Feb 8, 2016 at 9:31

divy3993

5,8202 gold badges30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

divy3993 Over a year ago

@JonasDulay Check the Update.

divy3993 Over a year ago

Check JavaScript selectedIndex in Script.

Jonas Dulay Over a year ago

onblur="multiply.call(this,this.form.elements.price.value,this.form.elements.quant.value);myFunction(this.value)" I have this fuction on my quant field it happens that my multiply.call is not working

divy3993 Over a year ago

what is multiply.call(this,this.form.elements.price.value,this.form.elements.qua‌nt.value) doing? I mean what is it for?

kp singh Over a year ago

above solution will not work when option texts are not in increment order.

|

kp singh · Accepted Answer · 2016-02-08 12:43:41Z

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

edited Feb 8, 2016 at 12:43

answered Feb 8, 2016 at 9:57

kp singh

1,4609 silver badges22 bronze badges

7 Comments

Jonas Dulay Over a year ago

when i choose 10 which is not on the select option field .. the select field must be null... the problem is that it does not change

Jonas Dulay Over a year ago

now the problem is that my total price is not working anymore

kp singh Over a year ago

just use your multiply function in this event block. check update

Jonas Dulay Over a year ago

this is my multiply function dont know how to put it

Jonas Dulay Over a year ago

|

jcubic · Accepted Answer · 2016-02-08 09:36:13Z

0

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

Sorry, don't know vanilla js solution.

answered Feb 8, 2016 at 9:36

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

1 Comment

divy3993 Over a year ago

I guess JQuery is not what OP wants.

Nana Partykar · Accepted Answer · 2016-02-08 10:03:09Z

0

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

answered Feb 8, 2016 at 10:03

Nana Partykar

10.5k10 gold badges50 silver badges79 bronze badges

2 Comments

Jonas Dulay Over a year ago

when i choose 4 which is not on the select option field it the select field must be null... the problem is that it does not change

Jonas Dulay Over a year ago

There's a bug ... if i put 10 in the first no select value shows. but when i choose 1 then select value shows then change the value of quant again into 10 the select value is not changing to null

Collectives™ on Stack Overflow

Change the select option value based on input field

4 Answers 4

8 Comments

7 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related