Conditional dropdown depopulation

Conditional dropdown depopulation - javascript

Right now I have two dropdowns of numbers. The functionality I want is: when I choose an option out of the first list, compare that selected option's value with the second list's option values and hide any options in the second list that are greater than the first list's selected option value.
<select name="input_6" id="input_2_6" class="medium gfield_select" tabindex="13">
<option value="117500">115,001 - 120,000</option>
<option value="122500">120,001 - 125,000</option>
<option value="127500">125,001 - 130,000</option>
<option value="132500">130,001 - 135,000</option>
<option value="137500">135,001 - 140,000</option>
<option value="142500">140,001 - 145,000</option>
<option value="147500">145,001 - 150,000</option>
<option value="152500">150,001 - 155,000</option>
<option value="157500">155,001 - 160,000</option>
<option value="162500">160,001 - 165,000</option>
<option value="167500">165,001 - 170,000</option>
<option value="172500">170,001 - 175,000</option>
<option value="177500">175,001 - 180,000</option>
<option value="182500">180,001 - 185,000</option>
<option value="187500">185,001 - 190,000</option>
<option value="192500">190,001 - 195,000</option>
<option value="197500">195,001 - 200,000</option>
<option value="205000">200,001 - 210,000</option>
<option value="215000">210,001 - 220,000</option>
<option value="225000">220,001 - 230,000</option>
<option value="235000">230,001 - 240,000</option>
<option value="245000">240,001 - 250,000</option>
<option value="255000" selected="selected">250,001 - 260,000</option>
<option value="265000">260,001 - 270,000</option>
<option value="275000">270,001 - 280,000</option>
<option value="285000">280,001 - 290,000</option>
<option value="295000">290,001 - 300,000</option>
<option value="305000">300,001 - 310,000</option>
<option value="315000">310,001 - 320,000</option>
<option value="325000">320,001 - 330,000</option>
<option value="335000">330,001 - 340,000</option>
<option value="345000">340,001 - 350,000</option>
<option value="355000">350,001 - 360,000</option>
</select>
<select name="input_7" id="input_2_7" class="medium gfield_select" tabindex="16">
<option value="102500" selected="selected">100,000 - 105,000</option>
<option value="107500">105,000 - 110,000</option>
<option value="112500">110,000 - 115,000</option>
<option value="117500">115,000 - 120,000</option>
<option value="122500">120,000 - 125,000</option>
<option value="127500">125,000 - 130,000</option>
<option value="132500">130,000 - 135,000</option>
<option value="137500">135,000 - 140,000</option>
<option value="142500">140,000 - 145,000</option>
<option value="147500">145,000 - 150,000</option>
<option value="152500">150,000 - 155,000</option>
<option value="157500">155,000 - 160,000</option>
<option value="162500">160,000 - 165,000</option>
<option value="167500">165,000 - 170,000</option>
<option value="172500">170,000 - 175,000</option>
<option value="177500">175,000 - 180,000</option>
<option value="182500">180,000 - 185,000</option>
<option value="187500">185,000 - 190,000</option>
<option value="192500">190,000 - 195,000</option>
<option value="197500">195,000 - 200,000</option>
<option value="202500">200,000 - 205,000</option>
<option value="207500">205,000 - 210,000</option>
<option value="212500">210,000 - 215,000</option>
<option value="217500">215,000 - 220,000</option>
<option value="222500">220,000 - 225,000</option>
<option value="227500">225,000 - 230,000</option>
<option value="232500">230,000 - 235,000</option>
<option value="237500">235,000 - 240,000</option>
<option value="242500">240,000 - 245,000</option>
<option value="247500">245,000 - 250,000</option>
<option value="252500">250,000 - 255,000</option>
<option value="257500">255,000 - 260,000</option>
<option value="262500">260,000 - 265,000</option>
<option value="267500">265,000 - 270,000</option>
<option value="272500">270,000 - 275,000</option>
<option value="277500">275,000 - 280,000</option>
<option value="282500">280,000 - 285,000</option>
<option value="287500">285,000 - 290,000</option>
<option value="292500">290,000 - 295,000</option>
<option value="297500">295,000 - 300,000</option>
<option value="302500">300,000 - 305,000</option>
<option value="307500">305,000 - 310,000</option>
<option value="312500">310,000 - 315,000</option>
<option value="317500">315,000 - 320,000</option>
<option value="322500">320,000 - 325,000</option>
<option value="327500">325,000 - 330,000</option>
<option value="332500">330,000 - 335,000</option>
<option value="337500">335,000 - 340,000</option>
<option value="342500">340,000 - 345,000</option>
<option value="347500">345,000 - 350,000</option>
<option value="352500">350,000 - 355,000</option>
</select>
Above are the two lists I'm working with (generated by gravity forms).
And here are two variations of jQuery I've tried so far:
<script type="text/javascript">
$('#input_2_6').change(function(){
var initial = $('#input_2_6 option:selected').val();
secondDropPop(initial);
function secondDropPop(i){
$('#input_2_7 option').each(function(){
if ($(this).val() > i){
$(this).css('display','none');
}
});
}
});
</script>
And
<script type="text/javascript">
$('#input_2_6').change(function(){
$('#input_2_6 option').each(function(){
if($(this).is(':selected')){
var initial = $(this).val();
secondDropPop(initial);
}
});
function secondDropPop(i){
$('#input_2_7 option').each(function(){
if ($(this).val() > i){
$(this).css('display','none');
}
});
}
});
</script>
What am I doing wrong?
jQuery ver: 1.11.3

Per jQuery documention
In the case of an array, the callback is passed an array index and a corresponding array value each time.
Looking at$(this).val() > i, i is not defined. This should be the first argument of your callback:
$('#input_2_7 option').each(function(i){
i = parseInt(i, 10);
if (parseInt($(this).val(), 10) > i){
$(this).css('display','none');
}
});
Edit
The problem here is that you are trying to apply styles to option tags which is a very unstable approach as each browser applies styles differently to option tags (some browsers do not allow any styles to apply). So your best bet is to create the second dropdown on the fly. Below is an example of this approach.
$('#input_2_6').change(function(){
var initial = $('#input_2_6 option:selected').val();
secondDropPop(initial);
function secondDropPop(i){
$('#input_2_7 option').each(function(){
if ($(this).val() > i){
$(this).css('display','none');
}
});
}
});
$('#input_2_6').change(function(){
$('#input_2_6 option').each(function(){
if($(this).is(':selected')){
var initial = $(this).val();
secondDropPop(initial);
}
});
function secondDropPop(i){
var $dropdown = $('#input_2_7').hide();//hide the dropdown as this will prevent the browser from rendering every time an option is appended
$dropdown.empty();
$('#full_dropdown option').each(function(){
if ($(this).val() <= i){
$dropdown.append($(this).clone());
}
});
$dropdown.show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="input_6" id="input_2_6" class="medium gfield_select" tabindex="13">
<option value="117500">115,001 - 120,000</option>
<option value="122500">120,001 - 125,000</option>
<option value="127500">125,001 - 130,000</option>
<option value="132500">130,001 - 135,000</option>
<option value="137500">135,001 - 140,000</option>
<option value="142500">140,001 - 145,000</option>
<option value="147500">145,001 - 150,000</option>
<option value="152500">150,001 - 155,000</option>
<option value="157500">155,001 - 160,000</option>
<option value="162500">160,001 - 165,000</option>
<option value="167500">165,001 - 170,000</option>
<option value="172500">170,001 - 175,000</option>
<option value="177500">175,001 - 180,000</option>
<option value="182500">180,001 - 185,000</option>
<option value="187500">185,001 - 190,000</option>
<option value="192500">190,001 - 195,000</option>
<option value="197500">195,001 - 200,000</option>
<option value="205000">200,001 - 210,000</option>
<option value="215000">210,001 - 220,000</option>
<option value="225000">220,001 - 230,000</option>
<option value="235000">230,001 - 240,000</option>
<option value="245000">240,001 - 250,000</option>
<option value="255000" selected="selected">250,001 - 260,000</option>
<option value="265000">260,001 - 270,000</option>
<option value="275000">270,001 - 280,000</option>
<option value="285000">280,001 - 290,000</option>
<option value="295000">290,001 - 300,000</option>
<option value="305000">300,001 - 310,000</option>
<option value="315000">310,001 - 320,000</option>
<option value="325000">320,001 - 330,000</option>
<option value="335000">330,001 - 340,000</option>
<option value="345000">340,001 - 350,000</option>
<option value="355000">350,001 - 360,000</option>
</select>
<select name="input_7" id="input_2_7" class="medium gfield_select" tabindex="16" style="display:none">
</select>
<!--Create a new dropdown that is not used for anything except pulling data from. Turning this into an array could speed things up-->
<select id="full_dropdown" style="display:none;" tabindex="16">
<option value="102500" selected="selected">100,000 - 105,000</option>
<option value="107500">105,000 - 110,000</option>
<option value="112500">110,000 - 115,000</option>
<option value="117500">115,000 - 120,000</option>
<option value="122500">120,000 - 125,000</option>
<option value="127500">125,000 - 130,000</option>
<option value="132500">130,000 - 135,000</option>
<option value="137500">135,000 - 140,000</option>
<option value="142500">140,000 - 145,000</option>
<option value="147500">145,000 - 150,000</option>
<option value="152500">150,000 - 155,000</option>
<option value="157500">155,000 - 160,000</option>
<option value="162500">160,000 - 165,000</option>
<option value="167500">165,000 - 170,000</option>
<option value="172500">170,000 - 175,000</option>
<option value="177500">175,000 - 180,000</option>
<option value="182500">180,000 - 185,000</option>
<option value="187500">185,000 - 190,000</option>
<option value="192500">190,000 - 195,000</option>
<option value="197500">195,000 - 200,000</option>
<option value="202500">200,000 - 205,000</option>
<option value="207500">205,000 - 210,000</option>
<option value="212500">210,000 - 215,000</option>
<option value="217500">215,000 - 220,000</option>
<option value="222500">220,000 - 225,000</option>
<option value="227500">225,000 - 230,000</option>
<option value="232500">230,000 - 235,000</option>
<option value="237500">235,000 - 240,000</option>
<option value="242500">240,000 - 245,000</option>
<option value="247500">245,000 - 250,000</option>
<option value="252500">250,000 - 255,000</option>
<option value="257500">255,000 - 260,000</option>
<option value="262500">260,000 - 265,000</option>
<option value="267500">265,000 - 270,000</option>
<option value="272500">270,000 - 275,000</option>
<option value="277500">275,000 - 280,000</option>
<option value="282500">280,000 - 285,000</option>
<option value="287500">285,000 - 290,000</option>
<option value="292500">290,000 - 295,000</option>
<option value="297500">295,000 - 300,000</option>
<option value="302500">300,000 - 305,000</option>
<option value="307500">305,000 - 310,000</option>
<option value="312500">310,000 - 315,000</option>
<option value="317500">315,000 - 320,000</option>
<option value="322500">320,000 - 325,000</option>
<option value="327500">325,000 - 330,000</option>
<option value="332500">330,000 - 335,000</option>
<option value="337500">335,000 - 340,000</option>
<option value="342500">340,000 - 345,000</option>
<option value="347500">345,000 - 350,000</option>
<option value="352500">350,000 - 355,000</option>
</select>

Related

How do I compare two different values from a dropdown/select menu and apply it to a conditional statement as one value?

I'm trying to make a small calculator which asks the user for their month and date of birth and gives them the astrology sign according to the values they selected. I'm just not quite sure how to combine the two values into one so I can assign it to a variable.
JS:
function getSelectValues() {
var selectedMonth = document.getElementById("month").value;
var selectedDate = document.getElementById("date").value;
return selectedMonth + selectedDate;
}
getSelectValues();
HTML:
<form id="birthday">
<select id="month">
<option value=""></option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select id="date">
<option value=""></option>
<option value="1st">1</option>
<option value="2nd">2</option>
<option value="3rd">3</option>
<option value="4th">4</option>
<option value="5th">5</option>
<option value="6th">6</option>
<option value="7th">7</option>
<option value="8th">8</option>
<option value="9th">9</option>
<option value="10th">10</option>
<option value="11th">12</option>
<option value="12th">12</option>
<option value="13th">13</option>
<option value="14th">14</option>
<option value="15th">15</option>
<option value="16th">16</option>
<option value="17th">17</option>
<option value="18th">18</option>
<option value="19th">19</option>
<option value="20th">20</option>
<option value="21st">21</option>
<option value="22nd">22</option>
<option value="23rd">23</option>
<option value="24th">24</option>
<option value="25th">25</option>
<option value="26th">26</option>
<option value="27th">27</option>
<option value="28th">28</option>
<option value="29th">29</option>
<option value="30th">30</option>
<option value="31st">31</option>
</select>
<input type="submit" id="button" value="Go"></input>

This looks at the selectedIndex for the day/month values and then checks them against the Aries sign range as an example. Remember in JavaScript dates January is 0 not 1.
function getSelectValues() {
var selectedMonth = document.getElementById("month").selectedIndex - 1;
var selectedDate = document.getElementById("date").selectedIndex;
var d = new Date(0000, selectedMonth, selectedDate);
var ariesStr = new Date(0000, 2, 21)
var ariesEnd = new Date(0000, 3, 19)
console.log(ariesStr < d && d < ariesEnd)
}
<select id="month">
<option value=""></option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select id="date">
<option value=""></option>
<option value="1st">1</option>
<option value="2nd">2</option>
<option value="3rd">3</option>
<option value="4th">4</option>
<option value="5th">5</option>
<option value="6th">6</option>
<option value="7th">7</option>
<option value="8th">8</option>
<option value="9th">9</option>
<option value="10th">10</option>
<option value="11th">12</option>
<option value="12th">12</option>
<option value="13th">13</option>
<option value="14th">14</option>
<option value="15th">15</option>
<option value="16th">16</option>
<option value="17th">17</option>
<option value="18th">18</option>
<option value="19th">19</option>
<option value="20th">20</option>
<option value="21st">21</option>
<option value="22nd">22</option>
<option value="23rd">23</option>
<option value="24th">24</option>
<option value="25th">25</option>
<option value="26th">26</option>
<option value="27th">27</option>
<option value="28th">28</option>
<option value="29th">29</option>
<option value="30th">30</option>
<option value="31st">31</option>
</select>
<input type="button" onclick="getSelectValues()" id="button" value="Go">

I don't know how you're planning to check which sign they are, but it might actually be easier to keep the month and day separate. Then a simple way to check signs would be like:
const months = {
mar : {
cutoff: 21,
oneSign: picses,
otherSign: aries
},
jul : {
cutoff: 23,
oneSign: cancer,
otherSign: leo
},
oct : {
cutoff: 22,
oneSign: scorpio,
otherSign: sagittarius
}
}
function getSign(month, day){
if(day < months[month][cutoff]){ return months[month][oneSign]; }
else { return months[month][otherSign]; }
}

PHP+jQuery is preventing my select element from updating

I am using PHP to show years between 1940 and the current year and using a foreach loop to render each option inside a select element. Everything works as planned until I add an id to the select element that a block of jquery looks at for changes.
Essentially I am trying to console.log (for now) the value of whatever option gets selected but something about my jQuery/PHP is stopping the select from displaying the selected option. The console.log works as expected but the selected option doesn't update in the element. It always goes back to displaying the default option aka 2018 since it's the current year.
If I change the PHP foreach select/option to a static dropdown of plain HTML it works fine. Likewise, if I disconnect the jQuery but keep the PHP dynamically generated option list it works fine. Something about the combo of my PHP+jQuery is preventing the select from updating and I cannot figure what.
Here is my HTML/PHP code:
<select name="birthyear" id="birthyear">
<?php
// $years is setting the range from current year to 1940
$years = range(date('Y'), 1940);
foreach ($years as $year) {
echo "<option id='$year' value='$year'>".$year."</option>";
}
?>
</select>
Here is my jQuery:
$('#birthyear').on('change', function() {
var date = new Date();
var year = date.getFullYear();
var yearsOld = year - $(this).val();
console.log(yearsOld + " years old.");
if (yearsOld >= 18) {
console.log("age >= 18")
} else {
console.log("You aren't old enough!");
}
});
Am I missing something here?

Your code works fine... All I did was execute the PHP to get the HTML and then plugged it into JSFiddle.
I'd assume your problem is that you didn't properly include jQuery.
<select name="birthyear" id="birthyear">
<option id='2018' value='2018'>2018</option>
<option id='2017' value='2017'>2017</option>
<option id='2016' value='2016'>2016</option>
<option id='2015' value='2015'>2015</option>
<option id='2014' value='2014'>2014</option>
<option id='2013' value='2013'>2013</option>
<option id='2012' value='2012'>2012</option>
<option id='2011' value='2011'>2011</option>
<option id='2010' value='2010'>2010</option>
<option id='2009' value='2009'>2009</option>
<option id='2008' value='2008'>2008</option>
<option id='2007' value='2007'>2007</option>
<option id='2006' value='2006'>2006</option>
<option id='2005' value='2005'>2005</option>
<option id='2004' value='2004'>2004</option>
<option id='2003' value='2003'>2003</option>
<option id='2002' value='2002'>2002</option>
<option id='2001' value='2001'>2001</option>
<option id='2000' value='2000'>2000</option>
<option id='1999' value='1999'>1999</option>
<option id='1998' value='1998'>1998</option>
<option id='1997' value='1997'>1997</option>
<option id='1996' value='1996'>1996</option>
<option id='1995' value='1995'>1995</option>
<option id='1994' value='1994'>1994</option>
<option id='1993' value='1993'>1993</option>
<option id='1992' value='1992'>1992</option>
<option id='1991' value='1991'>1991</option>
<option id='1990' value='1990'>1990</option>
<option id='1989' value='1989'>1989</option>
<option id='1988' value='1988'>1988</option>
<option id='1987' value='1987'>1987</option>
<option id='1986' value='1986'>1986</option>
<option id='1985' value='1985'>1985</option>
<option id='1984' value='1984'>1984</option>
<option id='1983' value='1983'>1983</option>
<option id='1982' value='1982'>1982</option>
<option id='1981' value='1981'>1981</option>
<option id='1980' value='1980'>1980</option>
<option id='1979' value='1979'>1979</option>
<option id='1978' value='1978'>1978</option>
<option id='1977' value='1977'>1977</option>
<option id='1976' value='1976'>1976</option>
<option id='1975' value='1975'>1975</option>
<option id='1974' value='1974'>1974</option>
<option id='1973' value='1973'>1973</option>
<option id='1972' value='1972'>1972</option>
<option id='1971' value='1971'>1971</option>
<option id='1970' value='1970'>1970</option>
<option id='1969' value='1969'>1969</option>
<option id='1968' value='1968'>1968</option>
<option id='1967' value='1967'>1967</option>
<option id='1966' value='1966'>1966</option>
<option id='1965' value='1965'>1965</option>
<option id='1964' value='1964'>1964</option>
<option id='1963' value='1963'>1963</option>
<option id='1962' value='1962'>1962</option>
<option id='1961' value='1961'>1961</option>
<option id='1960' value='1960'>1960</option>
<option id='1959' value='1959'>1959</option>
<option id='1958' value='1958'>1958</option>
<option id='1957' value='1957'>1957</option>
<option id='1956' value='1956'>1956</option>
<option id='1955' value='1955'>1955</option>
<option id='1954' value='1954'>1954</option>
<option id='1953' value='1953'>1953</option>
<option id='1952' value='1952'>1952</option>
<option id='1951' value='1951'>1951</option>
<option id='1950' value='1950'>1950</option>
<option id='1949' value='1949'>1949</option>
<option id='1948' value='1948'>1948</option>
<option id='1947' value='1947'>1947</option>
<option id='1946' value='1946'>1946</option>
<option id='1945' value='1945'>1945</option>
<option id='1944' value='1944'>1944</option>
<option id='1943' value='1943'>1943</option>
<option id='1942' value='1942'>1942</option>
<option id='1941' value='1941'>1941</option>
<option id='1940' value='1940'>1940</option>
</select>
https://jsfiddle.net/gpfh150g/

JS - hide options based on value attribute

I need to hide all options when the value attribute is > 23
<select id="category_ids" class="cat-search-pb" multiple >
<option value="20">Condo for Sale</option>
<option value="24"> - Jomtien</option>
<option value="25"> - Bang Saray</option>
<option value="21">Condo for Rent</option>
<option value="22">House for Sale</option>
<option value="23">House for Rent</option>
<option value="14">Land</option>
<option value="15">Commercial</option>
<option value="18">New Condo Projects</option>
<option value="19">New House Projects</option>
</select>
But this code does not work:
$(document).ready(function () {
$(".cat-search-pb option[value>23]").closest('option').hide();
});
Thanks for your ideas!

You can use jquery filter() on the options that have the value attribute - see demo below:
$(document).ready(function() {
$(".cat-search-pb option[value]").filter(function() {
return +$(this).val() > 23;
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category_ids" class="cat-search-pb" multiple>
<option value="20">Condo for Sale</option>
<option value="24"> - Jomtien</option>
<option value="25"> - Bang Saray</option>
<option value="21">Condo for Rent</option>
<option value="22">House for Sale</option>
<option value="23">House for Rent</option>
<option value="14">Land</option>
<option value="15">Commercial</option>
<option value="18">New Condo Projects</option>
<option value="19">New House Projects</option>
</select>

Try this, using .filter(). You must convert the value attribute to number using Number() or +$(this)
$(function()
{
$(".cat-search-pb option").filter(function()
{
return +$(this).val() > 23;
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category_ids" class="cat-search-pb" multiple>
<option value="20">Condo for Sale</option>
<option value="24"> - Jomtien</option>
<option value="25"> - Bang Saray</option>
<option value="21">Condo for Rent</option>
<option value="22">House for Sale</option>
<option value="23">House for Rent</option>
<option value="14">Land</option>
<option value="15">Commercial</option>
<option value="18">New Condo Projects</option>
<option value="19">New House Projects</option>
</select>

I'm assuming you would like to listen for changes to the selection, showing them all initially. In that case you can use the $.change() listener
$( ".cat-search-pb" ).change(function(e) {
if (e.target.value > 23) {
$(e.target).hide()
}
});
https://jsfiddle.net/qee4qccv/
https://api.jquery.com/change/

Display message when one value is selected

Not a complicated one but i have very limited coding knowledge.
Im looking for a message to be display when a value from a select menu (Less than $10,000) is selected and also prevents the form from submitting.
<select name="levelofdebt" class="form-control" id="levelofdebt" required>
<option value="" disabled selected="selected">Select total debt</option>
<option value="$10,000 or less">Less than $10,000</option>
<option value="$10-15k">$10,000 - $15,000</option>
<option value="$15-20k">$15,000 - $20,000</option>
<option value="$20-30k">$20,000 - $30,000</option>
<option value="$30-40k">$30,000 - $40,000</option>
<option value="$40-50k">$40,000 - $50,000</option>
<option value="$50-60k">$50,000 - $60,000</option>
<option value="$60-100k">$60,000 - $100,000</option>
<option value="$100k +">$100,000 +</option>
</select>
thanks in advance

function selectchange(){
if($("#levelofdebt").val() == '$10,000 or less')
{
alert('Amount Less than $10,000');
return false; // prevents page reload
}
else{
// Do something
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="levelofdebt" class="form-control" id="levelofdebt" required onchange="return selectchange();">
<option value="" disabled selected="selected">Select total debt</option>
<option value="$10,000 or less">Less than $10,000</option>
<option value="$10-15k">$10,000 - $15,000</option>
<option value="$15-20k">$15,000 - $20,000</option>
<option value="$20-30k">$20,000 - $30,000</option>
<option value="$30-40k">$30,000 - $40,000</option>
<option value="$40-50k">$40,000 - $50,000</option>
<option value="$50-60k">$50,000 - $60,000</option>
<option value="$60-100k">$60,000 - $100,000</option>
<option value="$100k +">$100,000 +</option>
</select>

How to pass the selected max and min price value to java script function inside of select tag in html?

I have a search form with select options. The options will have two values, But I want two select option for Max and Min price value.
<input type="hidden" id="budget_min" name="filter_budget_min" value="0" />
<select onchange="updatePriceLimit(this)">
<option value="0">- Min -</option>
<option value="100000">1Lac</option>
<option value="200000">2lacs</option>
<option value="300000">3lacs</option>
<option value="400000">4lacs</option>
<option value="500000">5lacs</option>
<option value="600000">6lacs</option>
<option value="700000">7lacs</option>
<option value="800000">8lacs</option>
<option value="900000">9lacs</option>
<option value="1000000">10lacs</option>
<option value="1100000">11lacs</option>
<option value="1200000">12lacs</option>
<option value="1300000">13lacs</option>
<option value="5000000">50lacs</option>
<option value="6000000">60lacs</option>
<option value="7000000">70lacs</option>
<option value="8000000">80lacs</option>
<option value="9000000">90lacs</option>
<option value="10000000">1cr</option>
</select>
<script>
function updatePriceLimit(select) {
var limit = select.value.split('0');
document.getElementById('budget_min').value = limit[0];
}
<select onchange="updatePriceLimit(this)">
<option value="0">- Max -</option>
<option value="100000">1Lac</option>
<option value="200000">2lacs</option>
<option value="300000">3lacs</option>
<option value="400000">4lacs</option>
<option value="500000">5lacs</option>
<option value="600000">6lacs</option>
<option value="700000">7lacs</option>
<option value="800000">8lacs</option>
<option value="900000">9lacs</option>
<option value="1000000">10lacs</option>
<option value="1100000">11lacs</option>
<option value="1200000">12lacs</option>
<option value="1300000">13lacs</option>
<option value="5000000">50lacs</option>
<option value="6000000">60lacs</option>
<option value="7000000">70lacs</option>
<option value="8000000">80lacs</option>
<option value="9000000">90lacs</option>
<option value="10000000">1cr</option>
</select>
<script>
function updatePriceLimit(select) {
var limit = select.value.split('1');
document.getElementById('budget_max').value = limit[1];
}
When I am using following code, it is working perfectly
<select onchange="updatePriceLimit(this)">
<option value="0-0">- Price Range -</option>
<option value="100000-1000000">Below 10 Lacs</option>
<option value="1000000-3000000">10 Lacs - 30 lacs</option>
<option value="3000000-6000000">30 Lacs - 60 Lacs</option>
<option value="6000000-9000000">60 Lacs - 90 Lacs</option>
<option value="9000000-12000000">90 Lacs - 1.20 Cr</option>
<option value="12000000-15000000">1.20 Cr- 1.50 Cr</option>
<option value="12000000-15000000">1.20 Cr - 1.50 Cr</option>
<option value="15000000-20000000">1.50 Cr - 2 Cr</option>
<option value="20000000-25000000">2 Cr - 2.5 Cr</option>
<option value="25000000-30000000">2.5 Cr - 3 Cr</option>
<option value="30000000-40000000">3 Cr - 4 Cr</option>
</select>
<script>
function updatePriceLimit(select) {
var limit = select.value.split('-');
document.getElementById('budget_min').value = limit[0];
document.getElementById('budget_max').value = limit[1];
}
Any ideas, please do me favor.
Thanks

Update your script like this:
function updatePriceLimit(select,budget) {
var limit = select.value;
document.getElementById(budget).value = limit;
}
Your HTML:
<select onchange="updatePriceLimit(this,'budget_min')">
<select onchange="updatePriceLimit(this,'budget_max')">

Develop Reference

JavaScript is the programming language of the Web.

Conditional dropdown depopulation - javascript

Related

How do I compare two different values from a dropdown/select menu and apply it to a conditional statement as one value?

PHP+jQuery is preventing my select element from updating

JS - hide options based on value attribute

Display message when one value is selected

How to pass the selected max and min price value to java script function inside of select tag in html?

Categories

Resources