Get HTML attribute values using jQuery - javascript

<html>
<body>
<div class="block-a">
<label data-value="15" name=symptom">Group1</label>
<div class="clsfWrapper">
<label data-value="10" name=clsfName"> SubHeader1</label>
<div class="ui-select">
<div class="ui-btn">
<span>SelectedValue</span>
<select class="selectClass">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
</div>
</div>
</div>
<div class="clsfWrapper">
<label data-value="11" name=clsfName"> SubHeader2</label>
<div class="ui-select">
<div class="ui-btn">
<span>SelectedValue</span>
<select class="selectClass">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
</div>
</div>
</div>
</div>
<div class="block-a">
<label data-value="16" name=symptom">Group2</label>
<div class="clsfWrapper">
<label data-value="5" name=clsfName"> SubHeader1</label>
<div class="ui-select">
<div class="ui-btn">
<span>SelectedValue</span>
<select class="selectClass">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
</div>
</div>
</div>
<div class="clsfWrapper">
<label data-value="6" name=clsfName"> SubHeader2</label>
<div class="ui-select">
<div class="ui-btn">
<span>SelectedValue</span>
<select class="selectClass">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
</div>
</div>
</div>
</div>
</html>
</body>
What is the best way to find every select SubHeader and Group value? For example the first one:
Group value: 15
Subheader value: 10
Option value : 1
and second one:
Group value: 15
Subheader value: 11
Option value : 1
I have a very robust way to get those values and i was wondering if there was any easier and more certain way.
jQuery:
function getHtmlAttributes(){
$.each($('#page_visit_reg_new_colds_2 option:selected'), function(key, value){
var optionParent = $(this).parent();
var selectParent = optionParent.parent();
var divParent1 = selectParent.parent();
var divParent2 = divParent1.parent();
var subheaderName = divParent1.parent().find('label[name=clsfName]').data('value');
var groupName = divParent2.parent().find('label[name=symptom]').data('value');
});
EDIT Changed label value to data-value

This instead of going from the option and then with parent up to the group, will start from the block and go down to the selected option.
It is still cycling trough the elements but is not using parent()
$.each($('.block-a'), function(){
var groupName = $(this).find("label[name='symptom']").data('value');
$.each($(this).find(".clsfWrapper"), function(){
var subheaderName = $(this).find("label[name='clsfName']").data('value');
$.each($(this).find('select option:selected'), function(){
var optionvalue = $(this).val();
});
});
});
On the JSFiddle i've added console log so you can check if everything is what you expect.

Since you're using the data attribute, just use this jQuery syntax:
$("#elementName").data("DataAttribute");
To get the value from the following label (IDs are better than names):
<label data-value="11" id="clsfName"> SubHeader2</label>
Use this:
var dataValue = $("#clsfName").data("value");

Related

How to get the selected text of options in multiple select?

I am trying to get the selected option in multiple select, I can get the value in the form of an array, but I can't get the text of the option.
$(function() {
$('#sizeAddCategory').change(function(e) {
var selected = $(e.target).text();
console.log("selected " + selected);
$('#textAreaAddCategory').val(selected.join(','));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-6">
<label for="sel1">Select Sizes (hold ctrl or shift (or drag with the mouse) to select more than one):</label>
<br/>
<select required class="form-control" id="sizeAddCategory" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="name">Selected Sizes</label>
<br/>
<textarea required disabled rows="4" class="form-control" id="textAreaAddCategory"></textarea>
</div>
On $(e.target).text(), I am getting all the options text, I need the text of only selected options, so I can display it in the textarea.
Using .text() on a select will give the text of the control - i.e. all of the options, not just the selected ones.
To get the selected text (not value as you pointed out you can already get), you can use:
$(this).find("option:checked").map((i,e)=>$(e).text()).toArray();
Here, $(this).find("option:checked") will give you the option elements that have been selected while the .map will return the .text() for each of those values into a jquery array, with .toArray() to convert to a normal js array.
$(function() {
$('#sizeAddCategory').change(function() {
var selected = $(this).find("option:checked").map((i,e)=>$(e).text()).toArray();
console.log("selected", selected);
$('#textAreaAddCategory').val(selected.join(','));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-6">
<label for="sel1">Select Sizes (hold ctrl or shift (or drag with the mouse) to select more than one):</label>
<br/>
<select required class="form-control" id="sizeAddCategory" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="name">Selected Sizes</label>
<br/>
<textarea required disabled rows="4" class="form-control" id="textAreaAddCategory"></textarea>
</div>
It's because the target that you're defining is in the select tag. Instead of using:
$('#sizeAddCategory').change(function(e) {
use:
$('.option-category').click(function(e) {
and add a class in the options:
<option value="{{$size->id}}" class="option-category">{{$size->name}}</option>
you write :
var selected = $(e.target).text();
you should get the value of selectbox and
you should write
var selected = $(e.target).val();
oh my god
i right now understand what did you mean
ok
write :
$("#selectBox").change(function(e){
var x = $(e.target).find("option:checked").text();
console.log(x);
});

Javascript get select value inside two divs

In my project i have a select incapsulated into two divs, i have to get the text or value) from the select from a javascript.
<div class="col-lg-3 col-xs-6" id="div1">
<div class="form-group" id="divTtype">
<label>Templte Type:</label>
<select class="form-control" id="ftype">
<option value="..All">..All</option>
<option value="Functional">Functional</option>
<option value="Non Functional">Non Functional</option>
</select>
</div>
</div>
i try this code:
function GetElementInsideContainer(containerID, childID) {
var elm = document.getElementById(childID);
var parent = elm ? elm.parentNode : {};
return (parent.id && parent.id === containerID) ? elm : {};
}
but when i try :
GetElementInsideContainer(divType, ftype).text;
an "undefined" return to me.
How can i get my select value?
so many thanks in advance
Actually there's a typo in your HTML code "divTtype", you meant to write divType
<div class="col-lg-3 col-xs-6" id="div1">
<div class="form-group" id="divType">
<label>Templte Type:</label>
<select class="form-control" id="ftype">
<option value="..All">..All</option>
<option value="Functional">Functional</option>
<option value="Non Functional">Non Functional</option>
</select>
</div>
</div>
Also you need to use textContent attribute instead of text
Finally please call the function using "id", else you are calling undefined variables divType and ftype
console.log(GetElementInsideContainer("divType", "ftype"));
This will certainly fix your current issue, although please refer to raphael answer for better approach.
Because text doesn't exist into HTMLElement.
You have to do this:
GetElementInsideContainer(divType, ftype).textContent;
Here's the documentation.
You should use quotes when you send string as a parameter:
GetElementInsideContainer('divType', 'ftype').text;
Like Krishna said in the comment above, you should be able to just do:
var select = document.getElementById('ftype')
var val = select.options[select.selectedIndex].value
You don't have to reference the parent node.
Use textContent and pass id in form of string otherwise it take it as a variable
secondly you have id divTtype and you were passing divType
function GetElementInsideContainer(containerID, childID) {
var elm = document.getElementById(childID);
var parent = elm ? elm.parentNode : {};
return (parent.id && parent.id === containerID) ? elm : {};
}
var a = GetElementInsideContainer("divType", "ftype").textContent;
console.log(a)
<div class="col-lg-3 col-xs-6" id="div1">
<div class="form-group" id="divType">
<label>Templte Type:</label>
<select class="form-control" id="ftype">
<option value="..All">..All</option>
<option value="Functional">Functional</option>
<option value="Non Functional">Non Functional</option>
</select>
</div>
</div>
Seems to be working fine overhere.
<div class="col-lg-3 col-xs-6" id="div1">
<div class="form-group" id="divTtype">
<label>Templte Type:</label>
<select class="form-control" id="ftype">
<option value="..All">..All</option>
<option value="Functional">Functional</option>
<option value="Non Functional">Non Functional</option>
</select>
</div>
</div>
<button onclick="getSelected(GetElementInsideContainer('divTtype', 'ftype'))">Get Selected Value</button>
<script>
function getSelected(objEl)
{
alert(objEl.options[objEl.selectedIndex].text);
}
function GetElementInsideContainer(containerID, childID) {
var elm = document.getElementById(childID);
var parent = elm ? elm.parentNode : {};
return (parent.id && parent.id === containerID) ? elm : {};
}
</script>
do you need the selected value of the select?
I did that snippet and get the HTML of the select.
with this snippet, you can get the value of a select
<div class="col-lg-3 col-xs-6" id="div1">
<div class="form-group" id="divTtype">
<label>Templte Type:</label>
<select class="form-control" id="ftype">
<option value="..All">..All</option>
<option value="Functional">Functional</option>
<option value="Non Functional">Non Functional</option>
</select>
</div>
</div>
function GetElementInsideContainer( childID) {
var elm = document.getElementById(childID);
console.log(elm.value)
return elm.value;
}
GetElementInsideContainer('ftype');
I think that maybe you pass in the argument an incorrect id

Show second dropdown menu on change of first selected

I am trying to create a dropdown that will show a second when the first is selected.
<div id="prob_type_1" name="prob_type_1">
<label>Select Problem Type</label>
<select class="form-control required" type="select" title="" id="prob_type_1" name ="prob_type_1">
<?php if ($client_db_number < 15000) { ?>
<option value = "">-Please Select-</option>
<option value = "SS-20 Appliance">SS-20 Appliance</option>
<option value = "BBoxx Appliance">BBoxx Appliance</option>
</select>
</div>
<div id="SS-20 Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="SS-20 Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
</select>
</div>
<div id="BBoxx Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="BBoxx Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
<option value = "BBoxx Radio">BBoxx Radio</option>
<option value = "Bboxx USB Multi Charger">Bboxx USB Multi Charger</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#prob_type_1").change(function(){
correspondingID = $(this).find(":selected").val()
$(".warren").hide();
$("#" + correspondingID).show();
})
</script>
the second menu just isn't showing when either of these is selected...
fiddle: https://jsfiddle.net/wazzahenry/6af6jd83/
based on this :http://jsfiddle.net/dKMzk/
and from this question: Show a second dropdown based on previous dropdown selection
You have a style: none for your multiple select. To solve this, instead of using $("#" + correspondingID).show();, I will rather change the style of the element.
You are declaring your id with an espace character. It is as if you are declaring differents ids for the same element. To solve this, I removed the space character in the ids .
$("#prob_type_1").change(function(){
var correspondingID = $(this).find(":selected").val()
$(".warren").hide();
correspondingID = correspondingID.replace(" ", "")
$("#" + correspondingID).css("display", "inherit");
})
<div id="prob_type_1" name="prob_type_1">
<label>Select Problem Type</label>
<select class="form-control required" type="select" title="" id="prob_type_1" name ="prob_type_1">
<?php if ($client_db_number < 15000) { ?>
<option value = "">-Please Select-</option>
<option value = "SS-20 Appliance">SS-20 Appliance</option>
<option value = "BBoxx Appliance">BBoxx Appliance</option>
</select>
</div>
<div id="SS-20Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="SS-20 Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
</select>
</div>
<div id="BBoxxAppliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="BBoxx Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
<option value = "BBoxx Radio">BBoxx Radio</option>
<option value = "Bboxx USB Multi Charger">Bboxx USB Multi Charger</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JQuery Searching for elements using dropdown list

I want to make it if you pick something in dropdown list except Condition, it will search all elements for that and show them.
my jquery:
$('#searchbtn').click(function(){
var e = document.getElementById("condition");
var strUser = e.options[e.selectedIndex].value;
$('.item').each(function(){
var itemcondition = $('.condition').html();
if (itemcondition === strUser.toLowerCase()){
$(this).show();
}
if (itemcondition !== strUser.toLowerCase()){
$(this).hide();
}
});
})
my html:
<select id="condition">
<option>Condition</option>
<option value="factory new">Factory New</option>
<option value="minimal wear">Minimal Wear</option>
<option value="field tested">Field Tested</option>
<option value="well worn">Well Worn</option>
<option value="battle scarred">Battle Scarred</option>
</select>
this is how element looks like:
<div class="item" data-keywords="m4a4 howl">
<div class="name">M4A4 Howl</div>
<div class="condition">Factory New</div>
<div class="price">800 000 coins</div>
<button>Buy</button>
</div>
Here is how you can fix it.
Your html attribute and javascript code should be changed. You should give option value with ID/slug of condition of your products -- it shouldn't have space as we will manage this data easier in the next step.
<select id="condition">
<option>Condition</option>
<option value="factory-new">Factory New</option>
<option value="minimal-wear">Minimal Wear</option>
<option value="field-tested">Field Tested</option>
<option value="well-worn">Well Worn</option>
<option value="battle-scarred">Battle Scarred</option>
</select>
and your products list should classes corresponding your selected option value like this.
<div class="item factory-new field-tested" data-keywords="m4a4 howl">
<div class="name">M4A4 Howl</div>
<div class="condition">Factory New</div>
<div class="price">800 000 coins</div>
<button>Buy</button>
</div>
And your javascript should be changed almost entirely. It's much easier to understand.
$('#searchbtn').click(function() {
var $condition = $("#condition");
var condition = $condition.val();
$('.item').hide();
$('.item.' + condition).show();
})
hope it helps.

Multiple show / hide jquery

My code below is showing the proper city/state div's when the matching country is selected from the drop down, but it's not hiding the previous one if the user decides to select another state. Do I have to create an if/else each for each div i want to hide?
<script type="text/javascript">
$(document).ready(function() {
...
//city & state display
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0)
$("#state_label").hide();
else {
$("#state_label").show();
stateSelect.show();
}
});
});
</script>
html code:
<label>Country/Locale:</label>
<select id="ctry" name="country">
<option value="">-- Select</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="AU">Australia</option>
</select><br />
<!-- US -->
<div id="state_US" style="display:none">
<label id="state_label" style="display:none">State:</label>
<span class="rstate">
<select name="u_state">
<option value="">-- State US</option>
<option value="AL">Alabama</option>
</select>
</span>
Zip or City:<input style="margin-left:43px;" type="text" name="locus" id="locus" size="30" />
</div>
<!-- CA -->
<div id="state_CA" style="display:none">
<label id="state_label" style="display:none">Province:</label>
<span class="rstate">
<select name="c_state">
<option value="">-- Prov CA</option>
<option value="ON">Windsor</option>
</select>
</span>
Postal or Place:<input style="margin-left:43px;" type="text" name="locca" id="locca" size="30" />
</div>
<!-- GB -->
<div id="state_GB" style="display:none">
<label id="state_label" style="display:none">City or Region:</label>
<span class="rstate">
<select name="k_state">
<option value="">-- Place</option>
<option value="AU">UK!</option>
</select>
</span>
</div>
<!-- AU -->
<div id="state_AU" style="display:none">
<label id="state_label" style="display:none">City or Region:</label>
<span class="rstate">
<select name="a_state">
<option value="">-- Place</option>
<option value="AU">UK!</option>
</select>
</span>
</div>
Remove the state_label ids..
Add the unused class state to the state_CA, state_US etc. elements..
So each state group should be
<div id="state_US" class="state" style="display:none">
<label style="display:none">State:</label>
<span class="rstate">
<select name="u_state">
<option value="">-- State US</option>
<option value="AL">Alabama</option>
</select>
</span>
Zip or City:<input style="margin-left:43px;" type="text" name="locus" id="locus" size="30" />
</div>
And change your script to be
<script type="text/javascript">
$(document).ready(function() {
...
//city & state display
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
stateSelect.show();
});
});
</script>
Demo at http://jsfiddle.net/gaby/PYx2v/
You cannot have multiple elements with the same ID. Your label state_Label is not unique. You should change this, otherwise some browsers will not show your label.
You hide all elements having the css-class "state". But there is no element having this class. I guess that you need to add class="state" to all of your state_*-divs.
Something like this logic might work for you:
var previous;
$(document).ready(function() {
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0) {
$("#state_label").hide();
} else {
if (previous) {
previous.hide(function() {
$("#state_label").show();
stateSelect.show();
previous = stateSelect;
});
} else {
$("#state_label").show();
stateSelect.show();
previous = stateSelect;
}
}
});
});
Though it would be easier if they all had the same CSS class, with which you could easily hide them and then show the one that was selected.

Categories