CODEWITHSUNDEEP
javascriptjquery
Jalpesh Patel
Jalpesh Patel

Reputation: 3188

Jquery : Select option of dropdown based on textbox text

I have tried to select option based on the textbox text.

Below is my html

<select id="select1">
    <option value="">-- Please Select --</option>
    <option value="277">12 +$2.99</option>
    <option value="278">25 +$2.75</option>
    <option value="279">50 +$2.50</option>
    <option value="280">100 +$2.00</option>
    <option value="281">250 +$1.90</option>
    <option value="282">500 +$1.70</option>
    <option value="283">1000 +$1.60</option>
    <option value="284">2500 +$1.50</option>
    <option value="285">5000 +$1.20</option>
    <option value="286">10000 +$1.00</option>
    <option value="287">25000 +$0.80</option>
</select>
<input type="text" id="pqr" />

And my js like bellow

 $(function(){
    $('#pqr').change(function(){
        $txt = $( "#select1 option:contains('"+$(this).val()+"')" ).text();
            $arr = $txt.split(" +");
            $( "#select1").val($txt);
            alert($arr[0])
            $( "#select1" ).filter(function() {
                 alert($( this ).text > $arr[0]);
            })
    });
});

so if user enter text 12 or greater than 12 and bellow 25 than i want to select option second 12 +$2.99 and if user enter 1500 than option 1000 +$1.60 get selected. Basically i have try to compare option text before (+) sign and try to select based on that.

Please give me hint or any good help so solve this problem

Upvotes: 3

Views: 1805

Answers (5)

raviture
raviture

Reputation: 1059

The $arr[0] in the change callback function will be containing a text value which is not yet parsed to integer so the statement alert($( this ).text > $arr[0]); would not give desired output. For checking the value lying between a range of select lists option you can use data attributes as followed:

<select id="select1">
    <option value="" data-min="-" data-max="-"> Please Select </option>
    <option value="277" data-min="12" data-max="25">12 +$2.99</option>
    <option value="278" data-min="25" data-max="50">25 +$2.75</option>

This way you will not have to Parse the text of option into integer. These data values can be retrieved for using jquery data function http://api.jquery.com/data/.

Also all the times you will not be getting the $('#pqr').val() as the text in the option's text so you will have to collect the value of text box and compare it with the range of each option(value >= data-max || value <= data-min).

Upvotes: 3

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this :

$(function(){
    $('#pqr').change(function(){
       var inputVal = parseInt($(this).val());
        $('#select1 option').each(function(){
           var firstVal = $(this).text().split('+')[0];
           var nextVal = inputVal;
           if(!$(this).is(':last'))
            $(this).next().text().split('+')[0];

            if(parseInt(firstVal) <= inputVal && parseInt(nextVal) >=inputVal)
            {
                $(this).prop('selected',true);
            }
        });
    });
});

Demo

Upvotes: 3

openorclose
openorclose

Reputation: 175

$(function(){
  $('#pqr').on("input", function(){
    var text = this.value;      
    var options = $("#select1 > option");
        var elementToSelect = options.eq(0);
    if (text.match(/[0-9]+/)) {
      elementToSelect = options.filter(function(){
        return Number(this.innerText.split("+")[0]) <= text;
      })
      .eq(-1);
    }
    elementToSelect.attr("selected",true);
  });   
});

Upvotes: 2

Ja͢ck
Ja͢ck

Reputation: 173662

At every change, iterate over all option elements and compare based on parseInt():

jQuery(function($) {
    $('#pqr').on('change', function() {
        var value = parseInt(this.value, 10),
        dd = document.getElementById('select1'),
        index = 0;

        $.each(dd.options, function(i) {
            if (parseInt(this.text, 10) <= value) {
                index = i;
            }
        });

        dd.selectedIndex = index; // set selected option
    });
});

Demo

Upvotes: 3

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

Loop through each option to compare the value. You can use something like this,

$(function () {
    $('#pqr').change(function () {
        var txtvalue = parseFloat($(this).val());
        $("#select1 option").each(function () {
            var splitText = $(this).next().text().split("+");
            if (splitText.length > 1) {
                if (txtvalue < parseFloat(splitText[0].trim())) {
                    $(this).prop("selected", true);
                    return false;
                }
            }
        });
    });
});

Fiddle

Upvotes: 3

Related Questions