Remove selected destination from dropdown list to another dropdown list

Remove selected destination from dropdown list to another dropdown list - javascript

I am currently developing an airline reservation using PHP(Codeigniter). Currently the fields/radio buttons that I have:
2 radio button
1) One way
2) Round Trip
2 dropdown list
1) From
2) To
and so on..
When the user trying to book, the user can't repeat the destination he inputted "from destination" into "to destination". Example: I have 3 destinations; 1) Country 1; 2) Country 2; 3) Country 3, then user tries to book. From: Country 1, To: Country1. The Country 1 in the "To:" should not be display because he already use it in the From Destination.
NOTE: The thing that I do first is, call all the available destinations in my controller then call it in my view using my foreach.
<div class="pure-u-1-1 fromto">
<div class="pure-u-1-1">
<label for="from" class="margin2px">From</label>
<!-- <input type="text" class="fromto"><br> -->
<select class="fromto" name="flight_from">
<?php foreach($flight as $a):?>
<option value ="<?= $a->flight_name?>" ><?= $a->flight_destination?></option>
<?php endforeach?>
</select>
</div>
<div class="pure-u-1-1">
<label for="to" class="tomargin">To</label>
<!-- <input type="text" class="fromto"><br> -->
<select class="fromto" name="flight_to">
<?php foreach($flight as $a):?>
<option value ="<?= $a->flight_name?>" ><?= $a->flight_destination?></option>
<?php endforeach?>
</select>
</div>
Question: How can I prevent it from repeating the country I selected in my "from destination" into "to destination"?

You may use jQuery:
$('select[name=flight_from]').on('change',function(){
$("select[name=flight_to]").find('option').show();
var from = $(this).find(":selected").val();
$("select[name=flight_to]").val('');
if ( from != "" ) {
$("select[name=flight_to]").find( 'option:contains("'+from+'")' ).hide();
}
})
<select name="flight_from">
<option value="">-- Please select depature --</option>
<option>Country 1</option>
<option>Country 2</option>
<option>Country 3</option>
</select>
<select name="flight_to">
<option value="">-- Please select destination --</option>
<option>Country 1</option>
<option>Country 2</option>
<option>Country 3</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Related

Hide an option element if a matching value is selected

One day I had a problem with PHP and a super guy resolved my problem, this time I learn JavaScript, and I'm really stuck on a project.
Here is the fiddle: https://jsfiddle.net/xasal/8c0kdqm4/5/
As you see, I have 2 selectors, on the left, the user see his characters, at the right, he can chose to switch his "race", the problem is I want JavaScript to run something when the guy selects his character at the left to compare with the right one and automatically delete the option if it's for the same race.. I made the functions for all to disappear, the only problem is the compare value... and when I think my code is nice I have issues in the dev console of unexpected end or syntax
Uncaught SyntaxError: Unexpected end of input
Sorry if it's kinda easy for you I'm really new :x
<select id="charSelect" name="charSelection">
<option value="Knight" selected="selected"><span id="charName">Gooffy</span> - <span class="charJob" onclick="detectChanges()">Knight</span> - lv.<span id="charLvl">175</span></option>
<option value="NightShadow"><span>Soul</span> - <span class="charJob" onclick="detectChanges()">NightShadow</span> - lv.<span>175</span></option>
<option value="Rogue"><span>Veli</span> - <span class="charJob" onclick="detectChanges()">Rogue</span> - lv.<span>175</span></option>
</select>
</section>
<input type="submit" value="Change my class to">
<section class="rightSelect">
<select class="jobSelect" name="jobSelection">
<option value="titan" id="titan" class="charJobChange" selected="selected">Titan</option>
<option value="knight" id="knight" class="charJobChange">Knight</option>
<option value="healer" id="healer" class="charJobChange">Healer</option>
<option value="mage" id="mage" class="charJobChange">Mage</option>
<option value="rogue" id="rogue" class="charJobChange">Rogue</option>
<option value="sorcerer" id="sorcerer" class="charJobChange">Sorcerer</option>
<option value="nightshadow" id="nightshadow" class="charJobChange">NightShadow</option>
</select>
function removeNS() { // example with Hide NS = nightshadow
$('#nightshadow').hide();
console.log("loaded");
}
function selectedCh(){
if($("#leftSelect select").find("option:selected").val() == "NightShadow") {
removeNS();
}
selectedCh();

Try this instead.
I called the function in onchange="selectedCh()" of left select box.
function selectedCh(){
// to get selected option in left select box in lowercase
var selectedtitem = $(".leftSelect select").find("option:selected").val().toLowerCase();
// to get total number of options in right select box
var oplen = $(".rightSelect select option").length;
// enable all option in right select box
$(".rightSelect select option").show();
// Loop for checking the selected option equals to any option in right select box
for(i=1;i<=oplen;i++){
if($(".rightSelect select option:nth-child("+i+")").val() == selectedtitem){
// to hide if equals in right select box option
$(".rightSelect select option:nth-child("+i+")").hide();
}
}
}
// to check first run the code
selectedCh();
Working demo
function selectedCh(){
var selectedtitem = $(".leftSelect select").find("option:selected").val().toLowerCase();
var oplen = $(".rightSelect select option").length;
$(".rightSelect select option").show();
for(i=1;i<=oplen;i++){
if($(".rightSelect select option:nth-child("+i+")").val() == selectedtitem){
$(".rightSelect select option:nth-child("+i+")").hide();
}
}
}
selectedCh();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="leftSelect">
<select id="charSelect" name="charSelection" onchange="selectedCh()">
<option value="Knight" selected="selected"><span id="charName">Gooffy</span> - <span class="charJob" onclick="detectChanges()">Knight</span> - lv.<span id="charLvl">175</span></option>
<option value="NightShadow"><span>Soul</span> - <span class="charJob">NightShadow</span> - lv.<span>175</span></option>
<option value="Rogue"><span>Veli</span> - <span class="charJob" >Rogue</span> - lv.<span>175</span></option>
</select>
</section>
<section class="rightSelect">
<select class="jobSelect" name="jobSelection">
<option value="titan" id="titan" class="charJobChange" selected="selected">Titan</option>
<option value="knight" id="knight" class="charJobChange">Knight</option>
<option value="healer" id="healer" class="charJobChange">Healer</option>
<option value="mage" id="mage" class="charJobChange">Mage</option>
<option value="rogue" id="rogue" class="charJobChange">Rogue</option>
<option value="sorcerer" id="sorcerer" class="charJobChange">Sorcerer</option>
<option value="nightshadow" id="nightshadow" class="charJobChange">NightShadow</option>
</select>
</section>

Hide option if value == 'option 3'
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectName">
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3 (hide on chnage)</option>
<option value="option 4">Option 4</option>
<option value="option 5">Option 5</option>
</select>
<script>
$('#selectName').on('change', function () {
if ($(this).val() == 'option 3') {
$('option[value="option 3"]',this).hide();
} else {
$('option[value="option 3"]',this).show();
}
}).trigger('change');;
</script>

Just use a query selector for find the matching option and hide it. Here is a minimal example:
var charSelect = document.querySelector('select[name="charSelection"]');
var jobSelect = document.querySelector('select[name="jobSelection"]');
charSelect.addEventListener('change', function(){
// Unhide any hidden options
jobSelect.querySelectorAll('option').forEach(opt=>opt.style.display = null);
// Hide the option that matches the above selected one
var value = this.value.toLowerCase();
jobSelect.querySelector(`option[value="${value}"]`).style.display = "none";
});
<select name="charSelection">
<option value="Knight" selected="selected">Knight</option>
<option value="NightShadow">NightShadow</option>
<option value="Rogue">Rogue</option>
</select>
<select name="jobSelection">
<option value="titan" selected="selected">Titan</option>
<option value="knight">Knight</option>
<option value="healer">Healer</option>
<option value="mage">Mage</option>
<option value="rogue">Rogue</option>
<option value="sorcerer">Sorcerer</option>
<option value="nightshadow">NightShadow</option>
</select>

I have two drop down lists with the same data of city's

list1 list2
pune pune
mumbai mumbai
lonavala lonavala
If I select pune in the first list, in the secound list pune will be hidden. I'm using codeignitor; it is dynamic drop down list.

You may use
$("#list2").val(...);
and
$("#list2").find("option:selected").remove();
together as :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#list1').on('change',function(){
var v_selected = $(this).val();
$("#list2").val(v_selected);
if ( v_selected == 'List1_0')
$("#list2").val('List2_0');
else $("#list2").find("option:selected").remove();
});
});
</script>
<label for="list1"> List1 </label>
<select id="list1">
<option value="List1_0" selected >Please Select ... </option>
<option value="Pune" >Pune</option>
<option value="Mumbai" >Mumbai</option>
<option value="Lonavala" >Lonavala</option>
</select>
<br>
<label for="list2"> List2 </label>
<select id="list2">
<option value="List2_0" selected >Please Select ... </option>
<option value="Pune" >Pune</option>
<option value="Mumbai" >Mumbai</option>
<option value="Lonavala" >Lonavala</option>
</select>

Show hidden select menus if value of another select menu is selected

I am new to jQuery and javaScript. I am using bootstrap. I have a select menu that is visible and two additional select menus that are hidden. I would like to show the hidden select menus id the user selects "TV" from the visible select menu options. If they select any of the other value options from the visible select menu, I need to display a simple text box where they can explain. After researching online I attempted to do it using some js, but it is not working. Below is my code and here is my jsfiddle link: https://jsfiddle.net/nx6cc1Lc/
HTML:
<div class="hear-from">
<div class="selects-4 col-xs-12">
<label for="heard_tv">Where did you hear about us from?</label>
<select id="heard_tv" class="form-control selectTV" name="heard_tv">
<option>--Choose Option--</option>
<option value="TV">TV Commercial</option>
<option value="Radio">Radio Advertisement-Other</option>
<option value="OT">Other</option>
</select>
</div>
<div class="selects-5 col-xs-6 hidden">
<select id="heard_from_station" class="form-control selectStation" name="heard_from_station">
<option>--Choose Station--</option>
<option value="TV:ABC">ABC News</option>
<option value="TV:TWCNews">New York 1 - TWC News</option>
<option value="TV:BBC">BBC America</option>
<option value="TV:CNBC">CNBC</option>
<option value="TV:CNN">CNN</option>
<option value="TV:Fox News">FOX News</option>
<option value="TV:Fox Business">FOX Business</option>
<option value="TV:TWCNews">Time Warner News</option>
<option value="TV:HLN">Headline News</option>
<option value="TV:MSNBC">MSNBC</option>
<option value="TV:Other">Other</option>
</select>
</div>
<div class="selects-6 col-xs-6 hidden">
<select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider">
<option>--Choose Provider--</option>
<option value="TVP:ATT">AT & T</option>
<option value="TVP:Comcast">Comcast</option>
<option value="TVP:Cablevision">Cablevision</option>
<option value="TVP:Charter">Charter Comm.</option>
<option value="TVP:Cox">Cox Comm.</option>
<option value="TVP:DirectTV">DirectTV</option>
<option value="TVP:Dish">Dish Network</option>
<option value="TVP:TimeWarner">Time Warner Cable</option>
<option value="TVP:VerFiOS">Verizon FiOS</option>
<option value="TVP:Antenna">Over the Air / Antenna</option>
<option value="TVP:Other">Other TV Provider</option>
</select>
</div>
</div>
Javascript:
// show tv station and provider menus if TV selected
$(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
//.....................^.......
{
$("#heard_from_station").removeClass('hidden');
$("#heard_from_provider").removeClass('hidden');
}
else
{
$('#heard_from_station').removeClass().addClass('hidden');
$('#heard_from_provider').removeClass().addClass('hidden');
}
});
});

Update your script as given below.
// show tv station and provider menus if TV selected
$(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
{
$("#heard_from_station").parent().removeClass('hidden');
$("#heard_from_provider").parent().removeClass('hidden');
}
else
{
$('#heard_from_station').parent().addClass('hidden');
$('#heard_from_provider').parent().addClass('hidden');
}
});
});
As your html contains "hidden" class on the parent element ".parent()", you need to add / remove class on the parent. Alternatively, you can also give ID to the parent elements and use those ids directly in your script, without using ".parent()".

Just use show() and hide() of jquery for this.Below is the code part for your issue
<script src="jquery.min.js"></script>
<script src="sample.js"></script>
<div class="hear-from">
<div class="selects-4 col-xs-12">
<label for="heard_tv">Where did you hear about us from?</label>
<select id="heard_tv" class="form-control selectTV" name="heard_tv">
<option>--Choose Option--</option>
<option value="TV">TV Commercial</option>
<option value="Radio">Radio Advertisement-Other</option>
<option value="OT">Other</option>
</select>
</div>
<div class="selects-5 col-xs-6" style="display:none">
<select id="heard_from_station" class="form-control selectStation" name="heard_from_station">
<option>--Choose Station--</option>
<option value="TV:ABC">ABC News</option>
<option value="TV:TWCNews">New York 1 - TWC News</option>
<option value="TV:BBC">BBC America</option>
<option value="TV:CNBC">CNBC</option>
<option value="TV:CNN">CNN</option>
<option value="TV:Fox News">FOX News</option>
<option value="TV:Fox Business">FOX Business</option>
<option value="TV:TWCNews">Time Warner News</option>
<option value="TV:HLN">Headline News</option>
<option value="TV:MSNBC">MSNBC</option>
<option value="TV:Other">Other</option>
</select>
</div>
<div class="selects-6 col-xs-6" style="display:none">
<select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider">
<option>--Choose Provider--</option>
<option value="TVP:ATT">AT & T</option>
<option value="TVP:Comcast">Comcast</option>
<option value="TVP:Cablevision">Cablevision</option>
<option value="TVP:Charter">Charter Comm.</option>
<option value="TVP:Cox">Cox Comm.</option>
<option value="TVP:DirectTV">DirectTV</option>
<option value="TVP:Dish">Dish Network</option>
<option value="TVP:TimeWarner">Time Warner Cable</option>
<option value="TVP:VerFiOS">Verizon FiOS</option>
<option value="TVP:Antenna">Over the Air / Antenna</option>
<option value="TVP:Other">Other TV Provider</option>
</select>
</div>
</div>
<script> $(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
//.....................^.......
{
$(".selects-5").show();
$(".selects-6").show();
}
else
{
$('.selects-5').hide();
$('.selects-6').hide();
}
});
});</script>

The problem is that the div tags that contain your secondary select menus are hidden, not the select menus themselves -- even so, your script is trying to remove the class from the select menus. So there are a number of ways you can fix this.
One way to fix this is to apply the hidden class to your select menus instead of your div tags.
<div class="selects-5 col-xs-6">
<select id="heard_from_station" class="form-control selectStation hidden" name="heard_from_station">
...
</select>
</div>
<div class="selects-6 col-xs-6">
<select id="heard_from_provider" class="form-control selectProvider hidden" name="heard_from_provider">
...
</select>
</div>

Set price using selection from dropdown menu

How can I set the price of items using dropdown menu lets say I have a dropdown menu with cars and trucks and depending on what the user picks the prices will vary how can I set the price of each one and update a box containing the price of each item.
<p><b>Truck: </b><select id="states" name="states" size="1">
<option>Please Choose</option>
<option value="F150">F150</option>
<option value="Ram1500">Ram1500</option>
<option value="chevy">chevy</option>
</select><br /></p><p><b>sports car: </b><select id="states" name="states" size="1">
<option>Please Choose</option>
<option value="mustang">mustang</option>
<option value="charger">charger</option>
<option value="camaro">camaro</option>
</select><br /></p>

Add extra attribute for price uzing data-* attributes, then on change get the value of this attribute and show it in the price field :
$('body').on('change', '#trucks', function(){
var selected_truck_price = $('option:selected', this).data('price');
$('#price').val(selected_truck_price);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<b>Truck: </b>
<select id="trucks" name="trucks" size="1">
<option>Please Choose</option>
<option data-price="150" value="F150">F150</option>
<option data-price="1500" value="Ram1500">Ram1500</option>
<option data-price="2000" value="chevy">chevy</option>
</select>
<br/>
</p>
Price : <input name='price' id='price'/>
Hope this helps.

jquery form only passing first select box values on submit

I'm new posting here, have visited several times over the years to read every ones ideas.
My issue is I have a form with 2 select boxes, second one populated with values upon selection in the first. The second holds a url value which you got to upon submit.
This function works perfectly using the onchange but on submit only the first of the second select list urls work. I can swap them but only the first works, all the others only pass the primary url followed by a crosshatch '#'.
<script>
$(document).ready(function($){
$("#category").change(function() {
$('select[name="product"]').removeAttr("name").hide();
$("#" + $(this).val()).show().attr("name", "product");
});
/* ' This works on all
$(".product").change(function() {
document.location = $(this).val();
});
*/
/* this only passes url on first product option list else passes opening url + #*/
$('#discover').submit(function() {
document.location = $(".product").val();
return false;
});
});
</script>
<div id="discover-box">
<form id="discover" method="post">
<fieldset>
<p class="category">
<label class="title">Category:</label>
<select id="category" name="category">
<option value="#" selected="selected">Choose category</option>
<option value="accommodation">Accommodation</option>
<option value="food">Food</option>
<option value="explore">Explore</option>
</select>
<p><label>Sub-Category:</label>
<select id="accommodation" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="accommodation_category.asp?o=1&c=1">Motels</option>
<option value="accommodation_category.asp?o=2&c=2">Camping, Caravan & Holiday Parks</option>
<option value="accommodation_category.asp?o=3&c=3">B&B, Self-Contained Houses & Cottages</option>
<option value="accommodation_category.asp?o=4&c=4">Hotels</option>
<option value="accommodation_category.asp?o=5&c=5">Backpackers & Group Accommodation</option>
<option value="accommodation_category.asp?o=6&c=6">National Parks</option>
</select>
<select id="food" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="food_wine_category.asp?o=1&t=1&c=1">Restaurants & Cafes</option>
<option value="food_wine_category.asp?o=2&t=1&c=2">Pubs</option>
<option value="food_wine_category.asp?o=3&t=1&c=3">Bakeries & Takeaway</option>
<option value="food_wine_category.asp?o=4&t=1&c=4">Local Produce</option>
<option value="food_wine_category.asp?o=5&t=2&c=1">Mount Gambier Wine Region</option>
<option value="food_wine_category.asp?o=5&t=2&c=2">Other Limestone Coast Wine Regions</option>
</select>
<select id="explore" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="explore_category.asp?o=1">Top 10</option>
<option value="explore_category.asp?o=2">Arts, Crafts, Galleries & Museums</option>
<option value="explore_category.asp?o=3">Heritage, Antiques & Collectables</option>
<option value="explore_category.asp?o=4">Family Fun</option>
<option value="explore_category.asp?o=5">Caves & Sinkholes</option>
<option value="explore_category.asp?o=6">Parks & Gardens</option>
<option value="explore_category.asp?o=7">Walks & Drives</option>
<option value="explore_category.asp?o=8">Kanawinka Geotrail</option>
<option value="explore_category.asp?o=9">Retail</option>
<option value="explore_category.asp?o=10">Recreation, Leisure & Adventure</option>
</select>
</p>
<p class="buttons">
<input type="image" src="images/submit-red.png" Value="submit">
</p>
</fieldset>
</form>
</div>

because $(".product").val(); will find first occurrence of DOM having class product so in any case it will fetch first one... u can do this using
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});

Open Fiddler (fiddler2.com) and watch the post go past. I find that generally when more than one control on a page uses the same name, the browser actually passes all of them, but the server-side framework expecting each post parameter to be unique, ignores all but the last one.

when you submit , you have only one select box with attribute name ,so you can select the selected value by that attribute
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});

Develop Reference

JavaScript is the programming language of the Web.

Remove selected destination from dropdown list to another dropdown list - javascript

Related

Hide an option element if a matching value is selected

I have two drop down lists with the same data of city's

Show hidden select menus if value of another select menu is selected

Set price using selection from dropdown menu

jquery form only passing first select box values on submit

Categories

Resources