I wanna make a dependable dropdown but I can't reach the child dropdown with jQuery:
These are the elements:
var types = $('#categorias').next('div').next('select[name="type_id"]').html();
console.log(types);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group">
<label for="category_id">Categoría</label>
<select id="categorias" class="form-control" name="category_id">
<option value="">Elegir categoría: </option>
<option value="1">Frutas y verduras</option>
<option value="2">Alimentos a granel</option>
<option value="3">Alimentos envasados</option>
<option value="4">Bebidas</option>
<option value="5">Art. de aseo personal</option>
<option value="6">Art. de limpieza</option>
</select>
</div>
<div class="form-group">
<label for="type_id">Tipo de producto</label>
<select name="type_id" class="form-control">
<option>Elegir tipo de producto: </option>
<option value="1">Tomate</option>
<option value="2">Plátano</option>
<option value="3">Naranja</option>
<option value="4">Manzana</option>
<option value="5">Palta</option>
<option value="6">Papa</option>
<option value="7">Spaghetti 5</option>
<option value="8">Cabello de Ángel</option>
</select>
</div>
I can't reach the code of the second dropdown to remove all the options from it and repopulate it with the new options.
I'm trying:
$('#categorias').first().closest('div').next('select[name="type_id"]');
but all I get is undefined or an empty set.
EDIT: I should clarify that this is just one select within a group of forms that can be created dynamically so I just want to reach the next one without accidentally removing several of them or having to add them individual ids.
To go from one select to the next one use the format:
$('select').closest('div.form-group').next('div.form-group').find('select')
.closest() traverses up the DOM, and .find() down.
Related
function calculateDeliveryCharge()
{
var CA=document.getElementById("pickup");
var c=CA.options[CA.selectedIndex].getAttribute('data-area');
alert(c);
}
<div class="container">
<div class="row">
<div class="col-12">
<select id="pickup" placeholder="পিকআপ এলাকা নির্বাচন করুন">
<option value="">পিকআপ এলাকা.....</option>
<option value="300 Feet"data-area="1">৩০০ ফিট (300 Feet)</option>
<option value="Adabor" data-area="1">আদাবর(Adabor)</option>
<option value="Adarsha Nagar(Badda)"data-area="1">আদর্শ নগর(বাড্ডা)- Adarsha Nagar(Badda)</option>
<option value="Aftab Nagar"data-area="1">আফতাব নগর(Aftab Nagar)</option>
<option value="Aga Nagar"data-area="1">আগা নগর(Aga Nagar)</option>
<option value="Agargaon"data-area="1">আগারগাঁও(Agargaon)</option>
<option value="Ahalia-Uttara"data-area="1">আহালিয়া-উত্তরা(Ahalia-Uttara)</option>
<option value="Ahmed Nagar"data-area="1">আহমেদ নগর(Ahmed Nagar)</option>
<option value="Ainusbag"data-area="1">আইনুসবাগ(Ainusbag)</option>
<option value="Ainusbag-Dakshinkhan"data-area="1">আইনুসবাগ-দক্ষিণখান(Ainusbag-Dakshinkhan)</option>
<option value="Ajiz Market"data-area="1">আজিজ মার্কেট(Ajiz Market)</option>
<option value="Alatunnessa School Road"data-area="1">আলাতুন্নেছা স্কুল রোড(Alatunnessa School Road)</option>
<option value="Alubazar"data-area="1">আলুবাজার(Alubazar)</option>
<option value="Amin bazar"data-area="1">আমিন বাজার(Amin bazar)</option>
<option value="Apollo"data-area="1">অ্যাপোলো(Apollo)</option>
</select>
</div>
</div>
<button class="border-1 p-2 bg-danger text-white"onclick="calculateDeliveryCharge()">ডেলিভারি চার্জ দেখুন</button>
</div>
I want to get the custom data attribute "data-area" value, 1 expected is here but I am getting null every time. What is the problem in my code and what is the solution?
This is a bit easier.
document.querySelector('#pickup option:checked').dataset.area
If we use #pickup, we selecting by ID as you have above. But by also specifying option:checked, we're looking for the currently selected option. (:checked is a bit weird here, but it's consistent with how other input elements work, such as checkboes.) Next, if you want the area data option, we can access it on the dataset property directly.
If nothing is selected, or the option does not contain the data-area property, your result will be not as expected.
It is generally not a good idea to use inline event handlers.
Here's a snippet using event delegation.
// => onclick="calculateDeliveryCharge()" becomes
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.nodeName === `BUTTON`) {
const selectr = document.querySelector("#pickup option:checked");
// find the selected option using a css selector ^^^
// this statement returns the option element when something
// is selected, null if nothing is selected
console.clear();
if (selectr &&
selectr.dataset.area) {
// ^ a data attribute value can be found using the elements' "dataset"
return console.log(`Area: ${selectr.dataset.area}`);
}
console.log(`No area or nothing selected yet`);
}
}
<div class="row">
<div class="col-12">
<select id="pickup" placeholder="পিকআপ এলাকা নির্বাচন করুন">
<option value="">পিকআপ এলাকা.....</option>
<option value="300 Feet" data-area="1">৩০০ ফিট (300 Feet)</option>
<option value="Adabor" data-area="1">আদাবর(Adabor)</option>
<option value="Adarsha Nagar(Badda)" data-area="1">আদর্শ নগর(বাড্ডা)- Adarsha Nagar(Badda)</option>
<option value="Aftab Nagar" data-area="1">আফতাব নগর(Aftab Nagar)</option>
<option value="Aga Nagar" data-area="1">আগা নগর(Aga Nagar)</option>
<option value="Agargaon" data-area="1">আগারগাঁও(Agargaon)</option>
<option value="Ahalia-Uttara" data-area="1">আহালিয়া-উত্তরা(Ahalia-Uttara)</option>
<option value="Ahmed Nagar" data-area="1">আহমেদ নগর(Ahmed Nagar)</option>
<option value="Ainusbag" data-area="1">আইনুসবাগ(Ainusbag)</option>
<option value="Ainusbag-Dakshinkhan" data-area="1">আইনুসবাগ-দক্ষিণখান(Ainusbag-Dakshinkhan)</option>
<option value="Ajiz Market" data-area="1">আজিজ মার্কেট(Ajiz Market)</option>
<option value="Alatunnessa School Road" data-area="1">আলাতুন্নেছা স্কুল রোড(Alatunnessa School Road)</option>
<option value="Alubazar" data-area="1">আলুবাজার(Alubazar)</option>
<option value="Amin bazar" data-area="1">আমিন বাজার(Amin bazar)</option>
<option value="Apollo" data-area="1">অ্যাপোলো(Apollo)</option>
</select>
</div>
</div>
<button class="border-1 p-2 bg-danger text-white">ডেলিভারি চার্জ দেখুন</button>
</div>
<select id="advert_category" name="advert_category">
<option value="">All Items</option>
<option value="512">All Test 2</option>
<option value="52">Vehicles</option>
<option value="64" data-depth="1"> Cars For Sale</option>
<option value="65" data-depth="1"> Cars For Rent</option>
<option value="66" data-depth="1"> All Vehicle Spare Parts</option>
<option value="67" data-depth="1"> Number</option>
</select>
on document load all subcategories should be hidden once the user presses on parent category it should toggle related subcategories.
How can I do this using jquery?
You can use classes (or even HTML data-* Attributes) for this and extract them on click of parent, then condition this to show subcategories.
When you click on Vehicles for example with class="Vehicles" it will get Vehicles from it in variable classes.
Then you find all classes with Vehicles-option and do something with it.
find("."+classes+"-option")
$( "#advert_category > option" ).click(function() {
var classes=$(this).attr("class");
console.log(classes);
$("#advert_category").find("."+classes+"-option").toggle();
});
.Vehicles-option, .colors-option {
display: none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="advert_category" name="advert_category">
<option value="">All Items</option>
<option value="512">All Test 2</option>
<option value="52" class="Vehicles">Vehicles</option>
<option value="64" data-depth="1" class="Vehicles-option" hidden> Cars For Sale</option>
<option value="65" data-depth="1" class="Vehicles-option" > Cars For Rent</option>
<option value="66" data-depth="1" class="Vehicles-option" hidden> All Vehicle Spare Parts</option>
<option value="67" data-depth="1" class="Vehicles-option" > Number</option>
<option value="52" class="colors">Colors</option>
<option value="64" data-depth="1" class="colors-option" > Red</option>
<option value="65" data-depth="1" class="colors-option" > Blue</option>
</select>
Aldo I have to say this seems like bad design as user must click again to show those subcategory, but that is what you wanted. Maybe rahter implement hover and see how that beehives. And please see HTML optgroup Tag.
BTW, you can not just keep select item open after clicking, so your toggle wont work as I think you want it to work:
Open Select using Javascript/jQuery?
jQuery simulate click
Make html select option drop down menu open by default
I've been trying to get a randomly element from my dropdownlist but I have 3 dropdown list with the same class in my page. I tried with the label and following-sibling but it didn't work.
This question is not about how to get any option in the dropdownlist, but how to get the options of three diferent dropdownlist and click.
First dropdownlist
<dropdownlist _ngcontent-xsl-24="">
<select class="form-control ng-pristine ng-valid ng-touched">
<!--template bindings={}-->
<option value="null">Selecione uma norma...</option>
<option value="06ea36f0-e6f0-4efe-a1db-8c5b6614f9e0">1356/2016</option>
<option value="7f3fd2de-1a0c-4bf7-a079-bc56a43caca9">126/2016</option>
<option value="5957aaee-1deb-4a9c-8127-b0ac9d208652">127/2016</option>
<option value="f37c484a-1948-44c5-aa42-e29152fdf811">1111/2011</option>
<option value="bdca9e45-c8f1-4c0a-8869-4ac3531a382f">23434/2014</option>
<option value="2ed84235-9dd1-49b0-b3bc-95b69f6a6f84">2334/2013</option>
<option value="57a0321a-ad55-41f3-a720-77546b8a0571">2334/2013</option>
<option value="2fc48229-327a-47c7-9b00-36c8ad5a33b2">2334/2013</option>
<option value="4b1580a2-a618-436c-9471-54b962842b9c">23346/2013</option>
<option value="3572fdf4-f452-4f93-ade8-1e374f6f4e17">35565/2012</option>
<option
</select>
second dropdonwlist
<dropdownlist>
<select class="form-control ng-pristine ng-valid ng-touched">
<!--template bindings={}-->
<option value="null">Selecione um tipo de cargo...</option>
<option value="3ab69292-eea9-467c-9f25-cef5fd1e9289">Carreira</option>
<option value="69bcde50-8c31-4261-836c-5e06ef5cf373">Comissão</option>
<option value="25af19da-7c39-49a7-8b69-a5dd22e96701">Juiz de Paz</option>
</select>
</dropdownlist>
last dropdownlist
<dropdownlist><select class="form-control ng-pristine ng-valid ng-touched">
<!--template bindings={}--><option value="null">Selecione um nível...</option>
<option value="fc14b561-9899-4d01-aceb-eb7704f38ad3">I</option>
<option value="fd4f8b88-3be7-458c-919b-33aeab8669e1">II</option>
<option value="06361835-be2e-4923-a829-fb5434b197f6">III</option>
<option value="b2ec02c5-b326-4b7c-8f74-36b7956b60b8">IV</option>
<option value="c5460dd4-7e2b-4a4a-a912-578e556d4528">V</option>
<option value="44ef96db-6e6b-479e-a330-e2db3a464bbd">VI</option>
<option value="55231551-2837-4910-a4d7-9053f9d1f79f">VII</option><option value="ed0067a2-506f-48a2-95bc-e5af436f0e80">VIII</option>
</select>
</dropdownlist>
Use element.all() with class name as locator, it will return three dropdown elements
Now use each() one result of 1 step, each() will iterate dropdowns one by one from top to bottom
Apply chaining on each dropdown element as shown in code
This way you can get the dropdown you want and select element you want
Code Snippet:
var inputOptionText='xyz'
element.all(by.css(".form-control.ng-pristine.ng-valid.ng-
touched")).each(function(dropdown,index){
dropdown.element(by.tag("option")).each(function(opt,index){
opt.getText().then(function(optionText){
if(optionText==inputText){
opt.click();
}
})
});
});
I am using label for attribute for input elements in my website that will help blind users. I have Combobox/Drop down in
my code to enter Date (Month/Day) format. Currently if there is only single drop down , for example Select Country, then on click on Label,
already selected country is reflecting as selected, that is okay. I have used this code of Jquery:
$(function () {
$('label').click(function () {
var id = $(this).attr('for');
$('#' + id).select();
});
});
But in Case of Date format as there are Child 'Label for' under Parent 'Label for' that is used for "ExpiryDate". So in this case
my upper written Jquery is not working.
That Jquery is working fine for Single Dropdown and for Teaxt boxes. But I want to select First child i.e. Month's already selected month should be
selected. Please assist me so that I can implement it. I want to handle that when user click over Label then TextBox, Single Dropdown and Combobox/Multiple related dropdown's already entered/selected items should
be shown as selected.
My HTML Code is here:
<div class="editor-label">
<label for="ExpiryDate">*Expiration Date</label>
</div>
<div class="editor-field">
<label class="accessibleText" for="ExpirationMonth">
<label for="ExpiryDate">*Expiration Date</label>
</label>
<select id="ExpirationMonth" name="ExpirationMonth" tabindex="0"><option value="">Month</option>
<option selected="selected" value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<label class="accessibleText" for="ExpirationDay">
<label for="ExpiryDate">*Expiration Date</label>
</label>
<select id="ExpirationDay" name="ExpirationDay" tabindex="0"><option value="">Day</option>
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
I want to select only first child's already select items to shown as selected.
if you change your label for to point related select attribute like below for month and day it will select when you click label.
<label for="ExpirationMonth">*Expiration Date</label>
<select id="ExpirationMonth" name="ExpirationMonth" tabindex="0">
I want to use this function to work on all my drop down lists. Problem: the first drop down works okay, but hen I try select any option in the 2nd drop down selections. It places the value from the first group in the span of the second group. I want the span to have the value from its own group. I would like to use this on multiple groups.
<script>function displayResult(xspan,xselect)
{
var x=document.getElementById(xselect).selectedIndex;
alert(x);
var newTxt = document.getElementsByTagName("option")[x].value;
document.getElementById(xspan).innerHTML = newTxt;
//alert(document.getElementsByTagName("option").length);
}
</script>
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
<option value="">Phone Numbers</option>
<optgroup label="Shipping">
<option value=" - 800-463-3339">FedEx</option>
<option value=""></option>
</optgroup>
</select>
<span id="ShowPhone"></span>
<select id="myParts" onchange="displayResult('ShowParts','myParts')">
<option value="">Qik Parts list</option>
<optgroup label="BATT">
<option value="1">1</option>
<option value="2">1</option>
<option value="2">1</option>
<option value="2"><1/option>
</optgroup>
</select>
<span id="ShowParts"></span>
Chage the id and the displayResult of the second dropdown:
First dropdown:
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
Second dropdown:
<select id="NewNameID" onchange="displayResult('ShowPhone','NewNameID')">