Changing a select value when a input value with jquery

Question

HTML

<div class="form-group">
<label class="col-md-4 control-label">input price</label>
<div class="col-md-8">
    <input class="form-control" placeholder="price" id='price'>
    </div>
</div>
<div class="form-group">
    <label class="col-md-4 control-label">Range</label>
    <div class="col-md-8">
        <select class="form-control"  disabled="disabled" name='range'>
            <option value=1>150.000</option>
            <option>200.000</option>
            <option>250.000</option>
            <option>300.000</option>
            <option>350.000</option>
            <option>400.000</option>
            <option>450.000</option>
        </select>
    </div>
</div>

jQuery script:

<script>
$$(document).ready(function($){
    $("#price").mask("999.000");

    $("#price").on('keyup', function() {
        var price = $("#price").val();
        if(price <= 150000)
        {
            $('#range').val(150000);
        }
    });
});
</script>

Hello guys, what Im trying to do is .. When I write the price (it has a mask), so only need to type the 3 first number, the ".000" is set automatically. So when a number is type I check the entered value, then depending of that price value I will like to change the #range value that is a select.

The select is disabled cause It will be set depending of the value is inserted on the price. 0-150000 , 150001-250000, 250001-3500001.. on and on

Its like if y type DOG, automatically the select would be set on Animals

Give more clarification. It is difficult to understand what you want. — Khamidulla
– Khamidulla, Commented Jan 3, 2014 at 4:13
For example, when 100000 is typed in price, then the SELECT must change to 150000 — Gucho Ca
– Gucho Ca, Commented Jan 3, 2014 at 4:16
It should be price in place of precio, Please confirm that. — Rohan Kumar
– Rohan Kumar, Commented Jan 3, 2014 at 4:20

Rohan Kumar · Accepted Answer · 2014-01-03 04:38:43Z

Try this,

$(function () {
    $("#price").on('keyup', function () {
        var price = this.value; // use this.value instead of $("#precio").val();
        if (price <= 150000) {
            $('#range').val(150000);
        } else if (price>150000 && price <= 200000) {
            $('#range').val(200000);
        } else if (price>200000 && price <= 250000) {
            $('#range').val(250000);
        } else if (price>250000 && price <= 300000) {
            $('#range').val(300000);
        } else if (price>300000 && price <= 350000) {
            $('#range').val(350000);
        } else if (price>350000 && price <= 400000) {
           $('#range').val(400000);
        } else if (price>400000 && price <= 450000) {
            $('#range').val(450000);
        } 
    });
});

Add value in options like,

<select class="form-control"  disabled="disabled" name='range' id='range'>
    <option value="150000">150.000</option>
    <option value="200000">200.000</option>
    <option value="250000">250.000</option>
    <option value="300000">300.000</option>
    <option value="350000">350.000</option>
    <option value="400000">400.000</option>
    <option value="450000">450.000</option>
</select>

Also change this line

$$(document).ready(function($){

to

$(document).ready(function(){

Working demo

Raunak Kathuria · Accepted Answer · 2014-01-03 04:20:54Z

1

Make the following correction, in JS you are accessing $("#precio").val(); but there is no id so use $("#price").val();

In document ready remove $ from $(document).ready(function($){

There is no range so $('#range').val(150000); as select has name as range but no id, so update the name to id or use $('select[name=range]')

In your option fields there is no value present so this will not update anything $('#range').val(200)

Check http://jsfiddle.net/raunakkathuria/JHm29/ (i have removed the mask function for demo and have added value to only two options you can add them to all as per your requirement)

answered Jan 3, 2014 at 4:20

Raunak Kathuria

3,2351 gold badge20 silver badges27 bronze badges

Collectives™ on Stack Overflow

Changing a select value when a input value with jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related