on select a option show higher value in other select option - javascript

Here I use 2 select option for show budget price,
when I select a price like 4000 then second select option show visible and display higher price than 4000.
What jquery code should I use?
Here is my code:
DEMO
pls check
<li>
<label>Budget</label>
<select name="budget_from" id="budget_from" onchange="setBudgetFinal('1','1', 'requiremant_frm','3999999','19999','5999','1');" onblur="" onfocus="" class="budget" style="width: 89px; visibility: visible;">
<option value="3999"><4000</option>
<option value="3000">3000</option>
<option value="5000">5000</option>
<option value="7000">7000</option>
<option value="9000">9000</option>
<option value="11000">11000</option>
<option value="13000">13000</option>
<option value="15000">15000</option>
<option value="17000">17000</option>
<option value="19000">19000</option>
<option value="21000">21000</option>
<option value="25000">25000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="45000">45000</option>
<option value="50000">50000</option>
<option value="55000">55000</option>
<option value="60000">60000</option>
<option value="65000">65000</option>
<option value="70000">70000</option>
<option value="75000">75000</option>
<option value="80000">80000</option>
<option value="85000">85000</option>
<option value="90000">90000</option>
<option value="95000">95000</option>
<option value="100000">1 Lac</option>
<option value="105000">1.05 Lacs</option>
<option value="110000">1.10 Lacs</option>
<option value="115000">>1.15 Lacs</option>
</select>
<span id="sc"> to</span>
<select style="visibility: visible;" disabled="" id="budget_to" name="budget_to" class="budget">
<option value="">Max Price</option>
</select>
</li>


Try this.
$('#budget_from option').on('click', function(){
$('#budget_to').find('option').not(':first').remove();
$(this).nextAll().clone(true).appendTo('#budget_to');
$('#budget_to').removeAttr('disabled');
});
Fiddle Demo

Related

i need help i have problem with sub option problem how to fix?

after select bmw and select option m5 option. m5 is not showing how to fix this problem ?
i need select bmw and sub option m5 ?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>
<div>
<select>
<option value="">select brand</option>
<option value="2594">bmw</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="2594 box">
<select name="xfield[bmw]">
<option value="0">114</option>
<option value="1">116</option>
<option value="2">118</option>
<option value="3">120</option>
<option value="4">123</option>
<option value="5">125</option>
<option value="6">128</option>
<option value="7">130</option>
<option value="8">135</option>
<option value="9">214</option>
<option value="10">216</option>
<option value="11">218</option>
<option value="12">220</option>
<option value="13">225</option>
<option value="14">228</option>
<option value="15">315</option>
<option value="16">316</option>
<option value="17">318</option>
<option value="18">320</option>
<option value="19">320 GranTurismo</option>
<option value="20">323</option>
<option value="21">324</option>
<option value="22">325</option>
<option value="23">328</option>
<option value="24">330</option>
<option value="25">335</option>
<option value="26">418</option>
<option value="27">420</option>
<option value="28">425</option>
<option value="29">428</option>
<option value="30">430</option>
<option value="31">435</option>
<option value="32">518</option>
<option value="33">520</option>
<option value="34">523</option>
<option value="35">524</option>
<option value="36">525</option>
<option value="37">528</option>
<option value="38">530</option>
<option value="39">535</option>
<option value="40">540</option>
<option value="41">545</option>
<option value="42">550</option>
<option value="43">628</option>
<option value="44">630</option>
<option value="45">633</option>
<option value="46">635</option>
<option value="47">640</option>
<option value="48">645</option>
<option value="49">650</option>
<option value="50">725</option>
<option value="51">728</option>
<option value="52">730</option>
<option value="53">732</option>
<option value="54">735</option>
<option value="55">740</option>
<option value="56">745</option>
<option value="57">750</option>
<option value="58">760</option>
<option value="59">840</option>
<option value="60">850</option>
<option value="61">i3</option>
<option value="62">i8</option>
<option value="63">M1</option>
<option value="64">M135</option>
<option value="65">M235</option>
<option value="66">M3</option>
<option value="67">M4</option>
<option value="68">M5</option>
<option value="69">M550</option>
<option value="70">M6</option>
<option value="71">X1</option>
<option value="72">X3</option>
<option value="73">X4</option>
<option value="74">X5</option>
<option value="75">X6</option>
<option value="76">X6M</option>
<option value="77">Z1</option>
<option value="78">Z3</option>
<option value="79">Z4</option>
<option value="80">Z8</option>
</select>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

Your issue is because you are hiding the select in your .change function. The way you currently have it written, your .change is going to fire for every select on the page. That isn't what you want here based on your issue.
If you don't want to hide the second box you either need to assign and id or class to the first select or you could use the :first selector.
Example: This example shows with the :first selector.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select:first").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>
<div>
<select>
<option value="">select brand</option>
<option value="2594">bmw</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="2594 box">
<select name="xfield[bmw]">
<option value="0">114</option>
<option value="1">116</option>
<option value="2">118</option>
<option value="3">120</option>
<option value="4">123</option>
<option value="5">125</option>
<option value="6">128</option>
<option value="7">130</option>
<option value="8">135</option>
<option value="9">214</option>
<option value="10">216</option>
<option value="11">218</option>
<option value="12">220</option>
<option value="13">225</option>
<option value="14">228</option>
<option value="15">315</option>
<option value="16">316</option>
<option value="17">318</option>
<option value="18">320</option>
<option value="19">320 GranTurismo</option>
<option value="20">323</option>
<option value="21">324</option>
<option value="22">325</option>
<option value="23">328</option>
<option value="24">330</option>
<option value="25">335</option>
<option value="26">418</option>
<option value="27">420</option>
<option value="28">425</option>
<option value="29">428</option>
<option value="30">430</option>
<option value="31">435</option>
<option value="32">518</option>
<option value="33">520</option>
<option value="34">523</option>
<option value="35">524</option>
<option value="36">525</option>
<option value="37">528</option>
<option value="38">530</option>
<option value="39">535</option>
<option value="40">540</option>
<option value="41">545</option>
<option value="42">550</option>
<option value="43">628</option>
<option value="44">630</option>
<option value="45">633</option>
<option value="46">635</option>
<option value="47">640</option>
<option value="48">645</option>
<option value="49">650</option>
<option value="50">725</option>
<option value="51">728</option>
<option value="52">730</option>
<option value="53">732</option>
<option value="54">735</option>
<option value="55">740</option>
<option value="56">745</option>
<option value="57">750</option>
<option value="58">760</option>
<option value="59">840</option>
<option value="60">850</option>
<option value="61">i3</option>
<option value="62">i8</option>
<option value="63">M1</option>
<option value="64">M135</option>
<option value="65">M235</option>
<option value="66">M3</option>
<option value="67">M4</option>
<option value="68">M5</option>
<option value="69">M550</option>
<option value="70">M6</option>
<option value="71">X1</option>
<option value="72">X3</option>
<option value="73">X4</option>
<option value="74">X5</option>
<option value="75">X6</option>
<option value="76">X6M</option>
<option value="77">Z1</option>
<option value="78">Z3</option>
<option value="79">Z4</option>
<option value="80">Z8</option>
</select>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
Or you can assign an id/class to the select.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#typeSelect").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>
<div>
<select id="typeSelect">
<option value="">select brand</option>
<option value="2594">bmw</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="2594 box">
<select name="xfield[bmw]">
<option value="0">114</option>
<option value="1">116</option>
<option value="2">118</option>
<option value="3">120</option>
<option value="4">123</option>
<option value="5">125</option>
<option value="6">128</option>
<option value="7">130</option>
<option value="8">135</option>
<option value="9">214</option>
<option value="10">216</option>
<option value="11">218</option>
<option value="12">220</option>
<option value="13">225</option>
<option value="14">228</option>
<option value="15">315</option>
<option value="16">316</option>
<option value="17">318</option>
<option value="18">320</option>
<option value="19">320 GranTurismo</option>
<option value="20">323</option>
<option value="21">324</option>
<option value="22">325</option>
<option value="23">328</option>
<option value="24">330</option>
<option value="25">335</option>
<option value="26">418</option>
<option value="27">420</option>
<option value="28">425</option>
<option value="29">428</option>
<option value="30">430</option>
<option value="31">435</option>
<option value="32">518</option>
<option value="33">520</option>
<option value="34">523</option>
<option value="35">524</option>
<option value="36">525</option>
<option value="37">528</option>
<option value="38">530</option>
<option value="39">535</option>
<option value="40">540</option>
<option value="41">545</option>
<option value="42">550</option>
<option value="43">628</option>
<option value="44">630</option>
<option value="45">633</option>
<option value="46">635</option>
<option value="47">640</option>
<option value="48">645</option>
<option value="49">650</option>
<option value="50">725</option>
<option value="51">728</option>
<option value="52">730</option>
<option value="53">732</option>
<option value="54">735</option>
<option value="55">740</option>
<option value="56">745</option>
<option value="57">750</option>
<option value="58">760</option>
<option value="59">840</option>
<option value="60">850</option>
<option value="61">i3</option>
<option value="62">i8</option>
<option value="63">M1</option>
<option value="64">M135</option>
<option value="65">M235</option>
<option value="66">M3</option>
<option value="67">M4</option>
<option value="68">M5</option>
<option value="69">M550</option>
<option value="70">M6</option>
<option value="71">X1</option>
<option value="72">X3</option>
<option value="73">X4</option>
<option value="74">X5</option>
<option value="75">X6</option>
<option value="76">X6M</option>
<option value="77">Z1</option>
<option value="78">Z3</option>
<option value="79">Z4</option>
<option value="80">Z8</option>
</select>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
There are 20 ways to skin this cat, you just need to limit your $(select) scope a bit.

How to set condition in dropdown list in HTML?

Here is my code for drop-down list part.
What should I add in to make the option selected when the value is matched with the option value? How to set condition like 'if value=50 ,selected = selected' ?
<label>Quantity:</label><br><br>
<select name="qty" id="qty" value="{{ qty }}">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="450">450</option>
<option value="500">500</option>
</select>

following code make the option selected when the value is matched with the option value.
<label>Quantity:</label><br><br>
<select name="qty" id="qty">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="450">450</option>
<option value="500">500</option>
</select>
<script>
$(document).ready(function(){
$('#qty option[value={{ $qty }}]').attr('selected','selected');
});
</script>

How to make multi level dropdown menu using select option mentod

i want to make multi level dropdown menu using select and option method
<select>
<option value="" data-display-text="Select">None</option>
<option value="oranges">SSC</option>
<option value="oranges">GATE</option>
<option value="bananas">BANK PO</option>
<option value="bananas">RAILWAY</option>
</select>

As far as I understand from your "multi level dropdown" concept, you can make a simple dropdown and just move some elements with CSS. Category name is stored in optgroup.
<select name="select_projects" id="select_projects">
<option value="">project.xml</option>
<optgroup label="client1">
<option value="">project2.xml</option>
</optgroup>
<optgroup label="client2">
<option value="">project5.xml</option>
<option value="">project6.xml</option>
<optgroup label="client2_a">
<option value="" style="margin-left:23px;">project7.xml</option>
<option value="" style="margin-left:23px;">project8.xml</option>
</optgroup>
<option value="">project3.xml</option>
<option value="">project4.xml</option>
</optgroup>
<option value="">project0.xml</option>
<option value="">project1.xml</option>
</select>
Update:
Or if you are trying to make a "chain" of dropdowns like you have in start menu in Windows, that is the easiest way to do it:
https://jqueryui.com/menu/

You can't make multiple levels with the select element.
In this case you would create a custom component with the capability to display something like 'hierarchic'.
Or use the trick like this:
<select>
<option>select me</option>
<option> me indented</option>
<option> even more indentation</option>
</select>

If you want to use ONE select you could use <optgroup/>. See example.
Note: it's not very multi-level, but it allows for some kind of relevant grouping.
<select>
<option value="" selected="selected">Select an option...</option>
<optgroup label="SSC">
<option value="oranges1">some option</option>
<option value="oranges2">some option</option>
<option value="oranges3">some option</option>
</optgroup>
<optgroup label="GATE">
<option value="bananas1">some option</option>
<option value="bananas2">some option</option>
<option value="bananas3">some option</option>
</optgroup>
<optgroup label="BANK PO">
<option value="apples1">some option</option>
<option value="apples2">some option</option>
<option value="apples3">some option</option>
</optgroup>
<optgroup label="RAILWAY">
<option value="grapes1">some option</option>
<option value="grapes2">some option</option>
<option value="grapes3">some option</option>
</optgroup>
</select>

You can't make multiple levels with the select element.
Any ways, if its any help, there's
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Maybe this can insprire you even if not totally correctly interpreted by editors.
<div class="col-2 search-filter">
<select id="searchByYear" multiple="multiple" ng-model="varYear.value">
<option value="2023">2023
<option value="2023-H1">H1</option>
<option value="2023-H2">H2</option>
</option>
<option value="2022">2022
<option value="2022-H1">H1</option>
<option value="2022-H2">H2</option>
</option>
<option value="2021">2021
<option value="2021-H1">H1</option>
<option value="2021-H2">H2</option>
</option>
<option value="2020">2020
<option value="2020-H1">H1</option>
<option value="2020-H2">H2</option>
</option>
<option value="2019">2019
<option value="2019-H1" >H1</option>
<option value="2019-H2" >H2</option>
</option>
</select>
</div>

Echoing HTML select value not giving same value set

I have this html select value that I used with AngularJS in building. Anytime I print the value selected from html in php, I keep getting a different thing. Eg. I selected Computer from the select group and the value="computer", when I echo in php, I get something like this:
? string: computer ?
I can't figure what the problem is.
HTML code below
<div class="form-group" form-group-sm>
<label>Faculty/School:</label>
<select name="faculty" class="form-control" ng-model="tfaculty">
<option value="Engineering">Faculty of Engineering</option>
<option value="Medicine">Faculty of Medicine</option>
<option value="Agriculture">Faculty of Agriculture</option>
<option value="Bioscience">Faculty of Bioscience</option>
<option value="Physical Science">Faculty of Physical Science</option>
<option value="Law">Faculty of Law</option>
<option value="Mgt Tech">Faculty of Management Sci./Tech.</option>
<option value="Soc. Science">Faculty of Social Science</option>
<option value="Health Sci.">Faculty of Health Sci. and Tech.</option>
<option value="Envt Tech">Faculty of Environmental Sci./Tech.</option>
<option value="Education">Faculty of Education</option>
<option value="Arts">Faculty of Arts</option>
</select>
</div>
<!--this section shows to choose department-->
<div class="form-group" form-group-sm>
<span ng-show="tfaculty == 'Engineering'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Elect Elect Eng">Electrical and Electronics</option>
<option value="Computer Eng">Computer Engineering</option>
<option value="Chemical Eng">Chemical Engineering</option>
<option value="Civil Eng">Civil Engineering</option>
<option value="Petroleum Eng">Petroleum Engineering</option>
<option value="Mechanical Eng">Mechanical Engineering</option>
<option value="Polymer Eng">Polymer and Textile</option>
<option value="Met Mat Eng">Material and Metallurgical</option>
<option value="Agric and Bio">Agric and BioResources</option>
<option value="Mechatronics Eng">Mechatronics Engineering</option>
</select>
</span>
<span ng-show="tfaculty == 'Medicine'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Surgery">Surgery</option>
<option value="Anaesthesiology">Anaesthesiology</option>
<option value="Chemical Pathology">Chemical Pathology</option>
<option value="Haematology">Haematology</option>
<option value="Histopathology">Histopathology</option>
<option value="Medicine">Medicine</option>
<option value="pthamology">Opthamology</option>
<option value="Paediatrics">Paediatrics</option>
<option value="Radiology">Radiology</option>
<option value="Medical Microbiology">Medical Microbiology</option>
<option value="Anatomy">Anatomy</option>
<option value="Physiology">Physiology</option>
</select>
</span>
<span ng-show="tfaculty == 'Agriculture'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Agric Economics">Agric Economics and Extension</option>
<option value="Crop Science">Crop Science and Horticulture</option>
<option value="Animal Science">Animal Science</option>
<option value="Forestry">Forestry and Widelife</option>
<option value="Fisheries">Fisheries and Aquaculture</option>
<option value="Food Science">Food Science and Technology</option>
<option value="Soil Science">Soil Science and Land Resources</option>
</select>
</span>
Php code below:
if (isset($_POST['search'])) { //narrowing d search by department
$department = $_POST['department'];
echo $department;}

How to delete the selected option using title attribute of select tag

I want to delete the first option of the selected and I have selected tag id and class but the problem is selected class and id is changing when I open the form of different-2 event.and class "r" of selected tag is using more than one time different-3 drop down of form.
I want to remove the selected option using title attribute of selected tag.
If any other way to resolved this type of problem please share.
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
I want to delete
<option value="">Select One </option>

Here is how to select using class and title in plain JavaScript
window.onload=function() {
var sel = document.querySelector("select.r[title='State*']");
console.log(sel);
sel.options[0]=null;
}
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>
Ditto in jQuery
$(function() {
var $options = $("select.r[title='State*'] option");
$options.eq(0).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>

you can add the hidden attribute:
<option value="" hidden>Select One</option>
this will result in being the default selected value but you can't select it in the dropdown
Example:
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="" hidden>Select One</option>
<option value="Michigan">Michigan</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
</select>
The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.).
The hidden attribute is new in HTML5.
Source: http://www.w3schools.com/tags/att_global_hidden.asp

In your scenario if select box's id is changing dynamically then you can achieve this with it's class name like below
$(".r option[value='']").each(function() {
$(this).remove();
});
If you want to delete it by using ID then you can do it like this..
$("#DROPDOWN_735 option[value='']").each(function() {
$(this).remove();
});
Or
$("select option[value='']").each(function() {
$(this).remove();
});

Try this
$(document).ready(function() {
$("select[title='State*'] option:first-child[value='']").remove();
})
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
Hope it will be useful.

Categories

Resources