selecting only the element in the same div with jquery - javascript

how can i selec only the element in the same div with jquery
$('.to-show').hide();
$('#offset').on('change', function() {
if ($(this).val() == "Custom") {
$(this).closest('.wrapper').children('.to-show').toggle();
} else {
$('.to-show').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>
So this only work with first select option
How i can make it work with the second select option what i am missing here ?
i tried also $(this).closest('.wrapper').find('.to-show').toggle();
but that did not work
thank you

Having two elements with the same id is invalid html. Switch it to use class or another attribute. But you have a second problem with $('.to-show').hide();, it is always hiding both .to-show.
$('.to-show').hide();
$('.offset').on('change', function() {
if ($(this).val() == "Custom") {
$(this).closest('.wrapper').children('.to-show').toggle();
} else {
$(this).closest('.wrapper').children('.to-show').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>

Related

What can I do in JavaScript to make each drop down menu only appear after selecting the one before it?

<div class="row">
<div class="col-md-4">
<label for="selectCustomers">Customer Select</label>
<select class="form-control pointer" name="tableCustomers" id="tableCustomers" style="font-size:100%" >
<option id="nothing" value="">---Select---</option>
<option id="1" value="1" >1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
<option id="4" value="4">4</option>
</select>
</div>
<div class="col-md-4">
<label for="selectBuilding">Chosen Customer, Building Select</label>
<select class="form-control pointer" name="tableCustomers" id="tableCustomers" style="font-size:100%">
<option id="nothing" value="">---Select---</option>
<option id="5" value="5" >5</option>
<option id="6" value="6">6</option>
<option id="7" value="7">7</option>
<option id="8" value="8">8</option>
</select>
</div>
<div class="col-md-4">
<label for="selectBattery">Chosen Building, Battery Select</label>
<select class="form-control pointer" name="tableCustomers" id="tableCustomers" style="font-size:100%">
<option id="nothing" value="">---Select---</option>
<option id="9" value="9" >9</option>
<option id="10" value="10">10</option>
<option id="11" value="11">11</option>
<option id="12" value="12">12</option>
</select>
</div>
</div>
I want it to only show the first dropdown menu (selectCustomers) when you first load onto
the page. After selecting an option other than id="nothing" it will show the next dropdown.
You can add all your selects in array, and add change event listener for each to remove hide class from the next select
const firstSelect = document.getElementById('tableCustomers1');
const secondSelect = document.getElementById('tableCustomers2');
const thirdSelect = document.getElementById('tableCustomers3');
const selectArray = [firstSelect, secondSelect, thirdSelect]
selectArray.forEach((select, i) => select.addEventListener('change', () => {
const nextSelect = selectArray[i + 1]
if (nextSelect) {
nextSelect.closest('.hide').classList.remove('hide');
}
}))
.hide {
display: none;
}
<div class="row">
<div class="col-md-4">
<label for="selectCustomers">Customer Select</label>
<select class="form-control pointer" name="tableCustomers" id="tableCustomers1" style="font-size:100%" >
<option id="nothing" value="">---Select---</option>
<option id="1" value="1" >1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
<option id="4" value="4">4</option>
</select>
</div>
<div class="col-md-4 hide">
<label for="selectBuilding">Chosen Customer, Building Select</label>
<select class="form-control pointer" name="tableCustomers" id="tableCustomers2" style="font-size:100%">
<option id="nothing" value="">---Select---</option>
<option id="5" value="5" >5</option>
<option id="6" value="6">6</option>
<option id="7" value="7">7</option>
<option id="8" value="8">8</option>
</select>
</div>
<div class="col-md-4 hide">
<label for="selectBattery">Chosen Building, Battery Select</label>
<select class="form-control pointer" name="tableCustomers" id="tableCustomers3" style="font-size:100%">
<option id="nothing" value="">---Select---</option>
<option id="9" value="9" >9</option>
<option id="10" value="10">10</option>
<option id="11" value="11">11</option>
<option id="12" value="12">12</option>
</select>
</div>
</div>

Parent <div> hides when I click it

I have a input-field, and when I click it a <div> will be shown.
But for some reason when I click on the <div>, it hides, and I can't seem to find the issue.
JSfiddle
$('#searchid').blur(function() {
if ($(this).val() != "") {
$("#drope_box").show();
} else {
$("#drope_box").hide();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>
This is because you're hiding the <div> when you lose focus on the input and there is no value.
In your blur handler, if the input is empty (as when you first click it), it will hide the dropdown when the input loses focus.
check this I hope that this answered what you have asked for...
$('#searchid').blur(function() {
if($(this).val() != ""){
$("#drope_box").hide();
}
else{
$("#drope_box").show();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>

Swap HTML <option> values using JavaScript

I've tried a range of methods to try and swap two options and none worked.
I want the first option of select to swap with first option of select1
Is anyone able to provide an example of how to deal with this swap?
Here is the JavaScript I have tried:
$('#swap').click(function() {
var v1 = $('#select').val(),
v2 = $('#select1').val();
$('#select').val(v2);
$('#select1').val(v1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tour__converter">
<form action="#" class="search-tour__form flex">
<div class="search-tour__form_left-side">
<input type="number" id="amount" value="1" class="search-tour__input">
<div class="search-tour__drop-down">
<select id="select" class="main-dropdown">
<option value="EUR">EUR</option>
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="UAH">UAH</option>
</select>
</div>
</div>
<button class="search-tour__btn" value="swap" id="swap" type="button">Swap
</button>
<div class="search-tour__form_right-side">
<div class="search-tour__drop-down">
<select id="select1" class="main-dropdown">
<option value="UAH">UAH</option>
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<input type="number" id="result" value="31.37" class="search-tour__input">
</div>
<input type="button" class="titles-block__btn" value="Конвертировать" onclick="calculate();">
</form>
</div>
Are you trying to do the following?
$('#swap').click(function()
{
var v1 = $('#select option:first-child');
var v2 = $('#select1 option:first-child');
var temp1 = v1.html();
var temp2 = v2.html();
v2.html(temp1);
v1.html(temp2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tour__converter">
<form action="#" class="search-tour__form flex">
<div class="search-tour__form_left-side">
<input type="number" id="amount" value="1" class="search-tour__input">
<div class="search-tour__drop-down">
<select id="select" class="main-dropdown">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="UAH">UAH</option>
</select>
</div>
</div>
<button class="search-tour__btn" value="swap" id="swap" type="button">Swap
</button>
<div class="search-tour__form_right-side">
<div class="search-tour__drop-down">
<select id="select1" class="main-dropdown">
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<input type="number" id="result" value="31.37" class="search-tour__input">
</div>
<input type="button" class="titles-block__btn" value="Конвертировать" onclick="calculate();">
</form>
</div>

Input's placeholder won't change from <select>

So basically what I'm trying to achieve is to make the placeholder of the inputs change when I change the select. The first input successfully changes, but that doesn't seem to be the same with the second input. Below is the code that I am using:
function onChange(fromOrTo) {
if (fromOrTo = 'from') {
document.getElementById("from").placeholder = document.getElementById("selectFrom").value;
} else if (fromOrTo = 'to') {
document.getElementById("to").placeholder = document.getElementById("selectTo").value;
}
}
<body>
<div id="sect">
<section>
<select onchange="onChange('from')" id="selectFrom">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
<span class="toText">to</span>
<select onchange="onChange('to')" id="selectTo">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
</section>
<section>
<input type="text" id="from">
<span id="toText">to</span>
<input type="text" id="to">
</section>
</div>
</body>
You just need to compare with === instead of =
function onChange(fromOrTo) {
if (fromOrTo === 'from') {
document.getElementById("from").placeholder = document.getElementById("selectFrom").value;
} else if (fromOrTo === 'to') {
document.getElementById("to").placeholder = document.getElementById("selectTo").value;
}
}
<body>
<div id="sect">
<section>
<select onchange="onChange('from')" id="selectFrom">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
<span class="toText">to</span>
<select onchange="onChange('to')" id="selectTo">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
</section>
<section>
<input type="text" id="from">
<span id="toText">to</span>
<input type="text" id="to">
</section>
</div>
</body>
You only have one equals sign in each of your if conditionals. This assigns to the variable rather than compares it. Switching to two equals signs (or three to avoid type coercison) will resolve this problem:
function onChange(fromOrTo) {
if (fromOrTo === 'from') {
document.getElementById("from").placeholder = document.getElementById("selectFrom").value;
} else if (fromOrTo === 'to') {
document.getElementById("to").placeholder = document.getElementById("selectTo").value;
}
}
<body>
<div id="sect">
<section>
<select onchange="onChange('from')" id="selectFrom">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
<span class="toText">to</span>
<select onchange="onChange('to')" id="selectTo">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
</section>
<section>
<input type="text" id="from">
<span id="toText">to</span>
<input type="text" id="to">
</section>
</div>
</body>

locastorage save selection javascript

<select id="Gender" onchange="fctCheck(this.value);">
<option value="">Choose Gender</option>
<option value="men">Men</option>
<option value="wemen">Wemen</option>
<option value="girls">Girls</option>
<option value="boys">boys</option>
</select>
<br>
<br>
<select id="men" name="subselector" style="display:none">
<option value="">Choose an item</option>
<option value="tsm">T-Shirt</option>
<option value="lsm">long sleeve</option>
<option value="tankm">Tank Top</option>
<option value="fzhm">Full zip Hood</option>
<option value="pohm">Pull over Hood</option>
<option value="fzfm">Full zip Fleece</option>
<option value="fm">Fleece</option>
</select>
<select id="wemen" name="subselector" style="display:none">
<option value="slw">short sleeve</option>
</select>
<select id="girls" name="subselector" style="display:none">
<option value="shortsg">shorts</option>
</select>
<select id="boys" name="subselector" style="display:none">
<option value="tshirtb">tshirt</option>
</select>
<div style='display:none;' id="wsl">
<div class="colore white" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png">
</div>
<div class="colore black" data-image="http://mebe.co/ford">
</div>
<div class="colore yellow" data-image="http://mebe.co/f150">
</div>
<div class="colore orange" data-image="http://mebe.co/yukon">
</div>
<div class="colore red" data-image="http://mebe.co/370z">
</div>
</div>
<div style='display:none;' id="mtsm">
<div class="colore white active" data-image="http://torcdesign.com/shirts/white.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
</div>
<div class="colore black" data-image="http://torcdesign.com/shirts/black.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
</div>
<div class="colore yellow" data-image="http://torcdesign.com/shirts/yellow.jpg" data-image-back="http://amp.site88.net/shirts/orange.jpg">
</div>
<div class="colore orange" data-image="http://torcdesign.com/shirts/orange.jpg" data-image-back="http://amp.site88.net/shirts/yellow.jpg">
</div>
<div class="colore red" data-image="http://torcdesign.com/shirts/red.jpg" data-image-back="http://amp.site88.net/shirts/black.jpg">
</div>
</div>
i would like to know how i can display an image on a second page using the information the user selected on drop down i was told to use localstorage but i have not been able to make it work can someone please teach me exactly how to save selection of all the drop downs the user picks? all i need is to save the selection from the previous page and i will take care of the rest.
That should give you a direction:
function save() {
localStorage.setItem("selection", document.getElementById("Gender").value);
}
window.onload = function() {
console.log(localStorage.getItem("selection"));
}
<select id="Gender" onchange="save()">
<option value="">Choose Gender</option>
<option value="men">Men</option>
<option value="wemen">Wemen</option>
<option value="girls">Girls</option>
<option value="boys">boys</option>
</select>
You can save all the values in object and then set it to local storage using .
var vals = {
gender:"male" // object structure example
};
localstorage.setItem('nameforvalues', JSON.stringify(vals));
Than after moving to second page
You can get the object using
var storedvals = local storage.getItem('nameforvalues');
storedvals = JSON.parse(storedvals);

Categories

Resources