toggle hidden label for element

toggle hidden label for element - javascript

How can I check if a element has a label and call the toggle function to display it?
Trying this:
if($('label').attr('for') == $(this).attr('name')) {
alert($('label').attr('for') == $(this).attr('name')); // displays true if hidden or displayed
$('label').attr('for='+$(this).attr('name')).toggle(true); // error
}
HTML not hidden (this is just to show the correct syntax as the element is hidden):
<div>
<label for="state" class="ui-select">
State*
</label>
<div class="ui-select">
<a href="#" role="button" aria-haspopup="true" data-theme="z" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-down-z ui-btn-up-z">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">State*</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
</span>
</a>
<select name="state" id="state" tabindex="-1" class="required">
<option value="">State*</option>
<option value="AK">ALASKA</option>
<option value="...">...</option>
</select>
</div>
</div>
HTML hidden:
<div>
<div class="ui-select">
<a href="#" role="button" aria-haspopup="true" data-theme="z" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-down-z ui-btn-up-z">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">State*</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
</span>
</a>
<select name="state" id="state" tabindex="-1" class="required">
<option value="">State*</option>
<option value="AK">ALASKA</option>
<option value="...">...</option>
</select>
</div>
</div>

It sounds like you're looking for $('label[for="' + this.name + '"]').
You can use the Attribute Equals selector to select elements with a specific attribute value.

Related

Not able to select hidden element from drop down list in Selenium Webdriver

Html Code:
<select class="select2 ddl visible select2-hidden-accessible" data-allow-clear="true" id="Step1Model_CampaignAdditionalDataTypeId" multiple="" name="Step1Model.CampaignAdditionalDataTypeId" tabindex="-1" aria-hidden="true">
<option value="1">Optus AC Number</option>
<option value="2">Date Of Birth</option>
<option value="3">Pass Phrase</option>
<option value="4">Transaction Id</option>
</select>
<span class="select2 select2-container select2-container--default select2-container--above" dir="ltr" style="width: 121.047px;">
<span class="selection">
<span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
<ul class="select2-selection__rendered">
<li class="select2-search select2-search--inline">
<input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li>
</ul>
</span></span>
<span class="dropdown-wrapper" aria-hidden="true">
</span></span>
I'm using following code(POM) in Selenium Webdriver(with java) to select:
public static By campAddDataType= By.id("Step1Model_CampaignAdditionalDataTypeId");
waitTime = new WebDriverWait(driver,20);
waitTime.until(ExpectedConditions.visibilityOf(driver.findElement(CommonOR.campAddDataType)));
String js = "arguments[0].hidden='false'";
((JavascriptExecutor) driver).executeScript(js,(driver.findElement(CommonOR.campAddDataType)));
CampAdd = new Select(driver.findElement(CommonOR.campAddDataType));
CampAdd.selectByVisibleText("Date Of Birth");
This drop-down list appears when user mark one option to true. So I believe that's why --> aria-hidden="true"
And for this option to make false, I ran java script executor but still the required element doesn't get selected from drop-down list.
Please suggest some solution.

Have you tried the below.
listItem = driver.findElement(By.xpath("//select[#id='Step1Model_CampaignAdditionalDataTypeId']/option[.='Date Of Birth']"))
((JavascriptExecutor) driver).executeScript("arguments[0].click();",listItem);

bootstrap-select get the value and the text

I try to do a selections on companies to add to a group, and after that to do the connection in database. I'm kind of blocked on the "html" code. I work in Laravel
<select id="selectCmp" class="selectpicker" data-live-search="true" multiple title="Select structures">
#foreach($allCompanies as $company)
<option value="{{$company->id}}"> {{$company->name}}</option>
#endforeach
</select>
<iframe name="votar" style="display:none;"></iframe>
<form action={{route('admin.group.affect')}} method="POST" target = "votar">
{{csrf_field()}}
<div id="cmpInputList">
</div>
</br>
<button id="addGroupeBtn" class="btn btn-secondary" type="submit">
Add
</button>
</form>
Ok, if try to inspect the element, I have something like:
<div class="btn-group bootstrap-select show-tick dropup">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button"
data-id="selectCmp" title="Select structures" aria-expanded="true"><span
class="filter-option pull-left"> Select structures</span> <span class="bs-caret"><span
class="caret"></span></span></button>
<div class="dropdown-menu open" role="combobox" style="max-height: 560px; overflow: hidden; min-height: 142px;">
<div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off" role="textbox"
aria-label="Search"></div>
<ul class="dropdown-menu inner" role="listbox" aria-expanded="false"
style="max-height: 504px; overflow-y: auto; min-height: 86px;">
<li data-original-index="0"><a tabindex="0" class="" data-tokens="null" role="option"
aria-disabled="false" aria-selected="false"><span
class="text"> A</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1"><a tabindex="0" class="selected" data-tokens="null" role="option"
aria-disabled="false" aria-selected="true"><span
class="text"> B </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2"><a tabindex="0" class="" data-tokens="null" role="option"
aria-disabled="false" aria-selected="false"><span
class="text"> C </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ul>
</div>
<select multiple="multiple" id="selectCmp" data-live-search="true" title="Select structures"
class="selectpicker" tabindex="-98">
<option value="1"> A</option>
<option value="0">B</option>
<option value="2"> C</option>
</select>
</div>
<iframe name="votar" style="display: none;"></iframe>
<form action="http://127.0.0.1:8000/admin/affectCmpToGroup" method="POST" target="votar">
<input type="hidden" name="_token" value="KSyRBJq6p6yJBPJnv0EOsC2sJwEe2SbzjxtLtuI5">
<div id="cmpInputList"></div>
<br>
<button id="addGroupeBtn" type="submit" class="btn btn-secondary">
Add
</button>
</form>
So I have a ul with the innerText and mention about selected or not. My problem is how to give the innerText and the value from option (the id) to the form in order to pass that to controller and to database.
I hope it's clear... I'm kind of new in all this.

For non 'multiple' select it is simply $('#selectCmp').val() and
$('#selectCmp option:selected').text().
In this case the array of chosen options ids can be also gotten via $('#selectCmp').val().
To get array of selected option names, it can be done like this:
$('#selectCmp').on('changed.bs.select', function (e) {
var options = $('#selectCmp option:selected');
var selected = [];
$(options).each(function(){
selected.push( $(this).text() );
// or $(this).val() for 'id'
});
// write value to some field, etc
});
Though this code might not be neccessarily bound to 'changed.bs.select', depending on your app logic.

Chosen-select multi-select - disable 2nd select based on selected.count of first

I have 4 "chosen" multi-select boxes.
Group -> Class -> Category -> Subcategory
When an option is selected from Group, it will populate Class with the relevant options (via ajax/json).
This is working great. However, I need to extend this to the following:
If 0, or more than 1 options are selected from group, I need to disable the remaining 3 sub-selects.
Just as if I were to select 0 or more than 1 options from Class, I would need to disable, category and subcategory.
The trouble I am having is, how do I get js to know how many options have been selected? As you can see in the image of the console below. I have first selected Confectionery, and then Liquor. The first console.log is this.value (of group) and the 2nd is the ajax response with my options for the class field. And when I go to add liquor, it says that confectionery is still this.value, I was expecting an array of {Confectionery, Liquor} which is why i have asked the question.
Here is my javascript:
each of my select boxes call this function onChange menuChange('NEXT-FIELD', this.value)
function menuChange(field, value){
/* clear all child select box values */
switch(field){
case "period":
if(value == "year"){
$("#yr").show();
$("#yrmth").hide();
} else if(value == "month"){
$("#yr").show();
$("#yrmth").show();
} else if(value == "ytd"){
$("#yr").hide();
$("#yrmth").hide();
} else if(value == "ttm"){
$("#yr").hide();
$("#yrmth").hide();
}
break;
}
console.log(value);
document.getElementById(field).options.length = 0;
$.ajax({
url: "ajaxrequest.php",
type: "post",
dataType: 'json',
data: { field: field,
value: value },
success: function (response) {
$.each(response,function(key, value)
{
$("#" + field).append('<option value=' + key + '>' + value + '</option>');
});
if(field == "period"){
} else {
$('#' + field).trigger("chosen:updated");
}
console.log(response);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}
$(document).ready(function(){
//Start with all subs disabled.
$('select:gt(5)').attr('disabled','disabled');
arrSelects = ['group','class','category','subcategory'];
//Listen to all selects for change
$('select').on('change',function(){
doSelects($(this));
});
})
function doSelects(sel) {
var selIndex = arrSelects.indexOf(sel.attr('class'));
var selCount = sel.val().length;
if(selCount == 1) {
$('select:eq(' + parseInt(selIndex + 1) + ')').removeAttr('disabled');
return;
}
if(!selCount || selCount > 1) {
$('select:gt(' + parseInt(selIndex) + ')').attr('disabled','disabled').find('option').removeAttr('selected');
return;
}
}
EDIT: Here is the output HTML of my page. I have also update the javascript above to include the full function, so that the 'period' parts of my page make more sense.
<body class="with-3d-shadow with-transitions">
<form style="margin:0; padding:0;" action="changedb.php" method="post">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="dashboard.php">Title</a>
<select style="display: inline; margin-top: 10px;" class="input-sm" name="dbname">
<option value="2_sar" selected="">SAR</option>
<option value="2_lstr">LSTR</option>
</select>
<button style="display: inline;" type="submit" class="btn btn-default">Go!</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Reports <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sales Analysis</li>
<li>Brand Affinity Analysis</li>
<li>Brand Affinity by Nationality</li>
<li>Cross Category Analysis</li>
<li>Nationality Report</li>
<li>Destination Report</li>
</ul>
</li>
<li class="dropdown">
Settings <span class="caret"></span>
<ul class="dropdown-menu">
<li>Change My Password</li>
<li>Control Panel</li>
</ul>
</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</nav>
</form>
<div class="container">
<div class="row">
<div class="col-xs-0 col-sm-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Sales Analysis <span class="sr-only">(current)</span></li>
<li>Brand Affinity Analysis</li>
<li>Brand Affinity by Nationality</li>
<li>Cross Category Analysis</li>
<li>Nationality Report</li>
<li>Destination Report</li>
</ul>
</div>
<!--Main Content Div -->
<div class="col-xs-12 col-sm-10 col-md-10 col-sm-offset-2" align="center">
<form action="" method="POST">
<div class="row">
<div align="left" class="col-xs-3">
<h2> Sales Analysis</h2>
</div>
<div align="left" class="col-xs-7 col-offset-xs-3">
<table>
<tbody>
<tr>
<td>Analyse </td>
<td>
<select name="measure" class="input-sm">
<option value="sales">Sales</option>
<option value="units">Units</option>
</select>
</td>
<td>Period </td>
<td>
<select onchange="menuChange('period', this.value)" name="period" class="input-sm">
<option value="year">Year</option>
<option value="month">Month</option>
<option value="ytd">YTD</option>
<option value="ttm">TTM</option>
</select>
</td>
<td>
<select style="width: 80px" class="input-sm" onchange="menuChange('yrmth', this.value)" name="yr" id="yr">
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select>
</td>
<td>
<select style="width: 80px" class="input-sm" name="yrmth" id="yrmth" hidden="">
<option value="201501">Jan</option>
<option value="201502">Feb</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-10">
Filters
<select data-placeholder="Group" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('class', this.value)" name="group[]" id="group">
<option value="Confectionery">Confectionery</option>
<option value="Liquor">Liquor</option>
<option value="Tobacco">Tobacco</option>
</select>
<div class="chosen-container chosen-container-multi" style="width: 115px;" title="" id="group_chosen">
<ul class="chosen-choices">
<li class="search-field"><input type="text" value="Group" class="default" autocomplete="off" style="width: 65px;"></li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results"></ul>
</div>
</div>
<select data-placeholder="Class" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('category', this.value)" name="class[]" id="class"></select>
<div class="chosen-container chosen-container-multi" style="width: 115px;" title="" id="class_chosen">
<ul class="chosen-choices">
<li class="search-field"><input type="text" value="Class" class="default" autocomplete="off" style="width: 60px;"></li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results"></ul>
</div>
</div>
<select data-placeholder="Category" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('subcategory', this.value)" name="category[]" id="category" disabled="disabled"></select>
<div class="chosen-container chosen-container-multi chosen-disabled" style="width: 115px;" title="" id="category_chosen">
<ul class="chosen-choices">
<li class="search-field"><input type="text" value="Category" class="default" autocomplete="off" style="width: 83px;" disabled=""></li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results"></ul>
</div>
</div>
<select data-placeholder="Subcategory" style="width: 115px; display: none;" class="chosen-select" multiple="" name="subcategory[]" id="subcategory" disabled="disabled"></select>
<div class="chosen-container chosen-container-multi chosen-disabled" style="width: 115px;" title="" id="subcategory_chosen">
<ul class="chosen-choices">
<li class="search-field"><input type="text" value="Subcategory" class="default" autocomplete="off" style="width: 105px;" disabled=""></li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results"></ul>
</div>
</div>
<button type="submit" class="btn btn-primary" name="submit">Go!</button>
</div>
</div>
</form>
<br>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.chosen-select').chosen();
$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
});
</script>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
This is the error in console when i try to remove an option.
Uncaught TypeError: Cannot read property 'length' of null

Here it is with your code. It's working correctly:
<body class="with-3d-shadow with-transitions">
<form style="margin:0; padding:0;" action="changedb.php" method="post">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="dashboard.php">Title</a>
<select style="display: inline; margin-top: 10px;" class="input-sm" name="dbname">
<option value="2_sar" selected="">SAR</option>
<option value="2_lstr">LSTR</option>
</select>
<button style="display: inline;" type="submit" class="btn btn-default">Go!</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Reports <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sales Analysis</li>
<li>Brand Affinity Analysis</li>
<li>Brand Affinity by Nationality</li>
<li>Cross Category Analysis</li>
<li>Nationality Report</li>
<li>Destination Report</li>
</ul>
</li>
<li class="dropdown">
Settings <span class="caret"></span>
<ul class="dropdown-menu">
<li>Change My Password</li>
<li>Control Panel</li>
</ul>
</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</nav>
</form>
<div class="container">
<div class="row">
<div class="col-xs-0 col-sm-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Sales Analysis <span class="sr-only">(current)</span></li>
<li>Brand Affinity Analysis</li>
<li>Brand Affinity by Nationality</li>
<li>Cross Category Analysis</li>
<li>Nationality Report</li>
<li>Destination Report</li>
</ul>
</div>
<!--Main Content Div -->
<div class="col-xs-12 col-sm-10 col-md-10 col-sm-offset-2" align="center">
<form action="" method="POST">
<div class="row">
<div align="left" class="col-xs-3">
<h2> Sales Analysis</h2>
</div>
<div align="left" class="col-xs-7 col-offset-xs-3">
<table>
<tbody>
<tr>
<td>Analyse </td>
<td>
<select name="measure" class="input-sm">
<option value="sales">Sales</option>
<option value="units">Units</option>
</select>
</td>
<td>Period </td>
<td>
<select onchange="menuChange('period', this.value)" name="period" class="input-sm">
<option value="year">Year</option>
<option value="month">Month</option>
<option value="ytd">YTD</option>
<option value="ttm">TTM</option>
</select>
</td>
<td>
<select style="width: 80px" class="input-sm" onchange="menuChange('yrmth', this.value)" name="yr" id="yr">
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select>
</td>
<td>
<select style="width: 80px" class="input-sm" name="yrmth" id="yrmth" hidden="">
<option value="201501">Jan</option>
<option value="201502">Feb</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="row">
<div id="selectGroup" class="col-xs-12 col-sm-10">
Filters
<!-- <select data-placeholder="Group" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('class', this.value)" name="group[]" id="group">
<option value="Confectionery">Confectionery</option>
<option value="Liquor">Liquor</option>
<option value="Tobacco">Tobacco</option>
</select> -->
<select multiple class="group">
<option value="Confectionery">Confectionery</option>
<option value="Liquor">Liquor</option>
<option value="Tobacco">Tobacco</option>
</select>
<div class="chosen-container chosen-container-multi" style="width: 115px;" title="" id="group_chosen">
<ul class="chosen-choices">
<li class="search-field"><input type="text" value="Group" class="default" autocomplete="off" style="width: 65px;"></li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results"></ul>
</div>
</div>
<!-- <select data-placeholder="Class" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('category', this.value)" name="class[]" id="class"></select> -->
<select multiple class="class">
<option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option>
</select>
<div class="chosen-container chosen-container-multi" style="width: 115px;" title="" id="class_chosen">
<ul class="chosen-choices">
<li class="search-field"><input type="text" value="Class" class="default" autocomplete="off" style="width: 60px;"></li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results"></ul>
</div>
</div>
<!-- <select data-placeholder="Category" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('subcategory', this.value)" name="category[]" id="category" disabled="disabled"></select> -->
<select multiple class="category">
<option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option>
</select>
<div class="chosen-container chosen-container-multi chosen-disabled" style="width: 115px;" title="" id="category_chosen">
<ul class="chosen-choices">
<li class="search-field"><input type="text" value="Category" class="default" autocomplete="off" style="width: 83px;" disabled=""></li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results"></ul>
</div>
</div>
<!-- <select data-placeholder="Subcategory" style="width: 115px; display: none;" class="chosen-select" multiple="" name="subcategory[]" id="subcategory" disabled="disabled"></select> -->
<select multiple class="subcategory">
<option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option>
</select>
</div>div>
<div class="chosen-container chosen-container-multi chosen-disabled" style="width: 115px;" title="" id="subcategory_chosen">
<ul class="chosen-choices">
<li class="search-field"><input type="text" value="Subcategory" class="default" autocomplete="off" style="width: 105px;" disabled=""></li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results"></ul>
</div>
</div>
<button type="submit" class="btn btn-primary" name="submit">Go!</button>
</div>
</div>
</form>
<br>
</div>
</div>
</div>
<!-- <script>
$(document).ready(function(){
$('.chosen-select').chosen();
$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
});
</script> -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Start with all subs disabled.
$('#selectGroup select:gt(0)').attr('disabled','disabled');
arrSelects = ['group','class','category','subcategory'];
//Listen to all selects for change
$('#selectGroup select').on('change',function(){
doSelects($(this));
});
})
function doSelects(sel) {
var selIndex = arrSelects.indexOf(sel.attr('class'));
var selCount = sel.val() == null?0:sel.val().length;
if(selCount == 1) {
$('#selectGroup select:eq(' + parseInt(selIndex + 1) + ')').removeAttr('disabled');
return;
}
if(!selCount || selCount > 1) {
$('#selectGroup select:gt(' + parseInt(selIndex) + ')').attr('disabled','disabled').find('option').removeAttr('selected');
return;
}
}
</script>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>

This should do it:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Start with all subs disabled.
$('select:gt(0)').attr('disabled','disabled');
arrSelects = ['group','class','category','subcategory'];
//Listen to all selects for change
$('select').on('change',function(){
doSelects($(this));
});
})
function doSelects(sel) {
var selIndex = arrSelects.indexOf(sel.attr('class'));
var selCount = sel.val().length;
if(selCount == 1) {
$('select:eq(' + parseInt(selIndex + 1) + ')').removeAttr('disabled');
return;
}
if(!selCount || selCount > 1) {
$('select:gt(' + parseInt(selIndex) + ')').attr('disabled','disabled').find('option').removeAttr('selected');
return;
}
}
</script>
<body>
group:<select multiple class="group"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option></select><br>
class:<select multiple class="class"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option></select><br>
category:<select multiple class="category"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option></select><br>
subcategory:<select multiple class="subcategory"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option></select><br>
</body>
</html>
EDIT-------
Try this in case there are other selects on the page:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Start with all subs disabled.
$('#selectGroup select:gt(0)').attr('disabled','disabled');
arrSelects = ['group','class','category','subcategory'];
//Listen to all selects for change
$('#selectGroup select').on('change',function(){
doSelects($(this));
});
})
function doSelects(sel) {
var selIndex = arrSelects.indexOf(sel.attr('class'));
var selCount = sel.val().length;
if(selCount == 1) {
$('#selectGroup select:eq(' + parseInt(selIndex + 1) + ')').removeAttr('disabled');
return;
}
if(!selCount || selCount > 1) {
$('#selectGroup select:gt(' + parseInt(selIndex) + ')').attr('disabled','disabled').find('option').removeAttr('selected');
return;
}
}
</script>
<body>
<div id="selectGroup">
group:<select multiple class="group"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option></select><br>
class:<select multiple class="class"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option></select><br>
category:<select multiple class="category"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option></select><br>
subcategory:<select multiple class="subcategory"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option></select><br>
</div>
</body>
</html>

jQuery doesn't find existing element

I have the following problem I have a dropdown on my website. But because I wanted to add style to it, I hid it and have a bootsrap dropdown showing over it.
This is my html structure:
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
I'm trying to change the text Maat_dames to simply just Maat, I've tried the following jQuery code:
if(jQuery('span .filter-option').length == 0){console.log("fail")}
if(jQuery('span .filter-option.pull-left').length == 0){console.log("fail")}
if(jQuery('span .filter-option .pull-left').length == 0){console.log("fail")}
When I check the console log, it returns fail in all three cases, so the element isn't found. Why is that the case?
EDIT
All the answers suggest removing the space between span and .filter-option and while it doesn't work on my site, it does work when I try to run the code snippets in the comments en when I try to recreate it in a JSFiddle.
Could it be the case that jQuery can't find the element since it is dynamically created by a plugin?

You are using a descendant combinator (a space).
span .filter-option means any element that is a member of the class filter-option and has an ancestor that is a span.
The only elements which are members of that class in your document are spans themselves and do not have ancestors that are also spans.
Remove the spaces from the selectors.
if(jQuery('span.filter-option').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>

Replace jQuery('span .filter-option') with jQuery('span.filter-option').
Currently jQuery('span .filter-option') is finding element with class filter-oprion inside span tags in DOM.
When you write jQuery('span.filter-option') it will find span elements with class filter-option in DOM.

('span.filter-option').length maybe?

jQuery: Save a select element option that has been selected

Hey guys I am trying to save the option that a user has selected on my form however I am unsure how I can do this.
I will briefly explain my setup...
I have this form on my home page:
<form class="form-home form-search">
<select class="form-control select-box">
<option value="make-any">Make (Any)</option>
<?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC))
{
echo '
<option value="'.$make["Make"].'">'.$make["Make"].'</option>
';
} ?>
</select>
<button href="used-cars.php">Search</button>
</form>
As you can see it is using PHP/MySQL to show the options available.
Okay so I then have this form on another page however the CSS styling is slightly different and it includes a few different select elements.
So when a user has selected an element on the home page all the button does is href to the used-cars.php which lists all of the results.
How can I make it so that jQuery saves the option the user selected on the home page and loads the used-cars.php with those options selected?
Any examples would be great.
EDITED
Example of my second form:
<div class="container con-col-listing">
<div class="row">
<div class="col-md-4 col-sm-4">
<form class="car-finder-container dflt-container">
<h2 class="h2-finder">Car finder</h2>
<ul class="toggle-view">
<li class="li-toggle">
<h4 class="h4-finder-toggle">Make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<select name="make" class="form-control select-box">
<option value="make-any">Make (Any)</option>
<?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC)){
$selected = $make['make'] == $_GET['make']?'selected="selected"':'';
echo '
<option value="'.$make["Make"].'">'.$make["Make"].'</option>
';
} ?>
</select>
<select class="form-control last-select select-box">
<option value="model-any">Model (Any)</option>
<?php while($model = $modelFilter->fetch(PDO::FETCH_ASSOC))
{
echo '
<option value="'.$model["Model"].'">'.$model["Model"].'</option>
';
} ?>
</select>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Body type<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="four-by-four-checkbox" class="float-checkbox" type="checkbox"/>
<label for="four-by-four-checkbox" class="label-checkbox">4x4</label>
<input id="convertible-checkbox" class="float-checkbox" type="checkbox"/>
<label for="convertible-checkbox" class="label-checkbox">Convertible</label>
<input id="coupe-checkbox" class="float-checkbox" type="checkbox"/>
<label for="coupe-checkbox" class="label-checkbox">Coupe</label>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="automatic-checkbox" class="float-checkbox" type="checkbox"/>
<label for="automatic-checkbox" class="label-checkbox">Automatic</label>
<input id="manual-checkbox" class="float-checkbox" type="checkbox"/>
<label for="manual-checkbox" class="label-checkbox">Manual</label>
<input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/>
<label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label>
</div>
</li>
</ul>
<button href="#" class="btn btn-block car-search-button btn-lg btn-success"><span class="glyphicon car-search-g glyphicon-search"></span> Search cars
</button>
<h4 class="h4-finder">Try our Smart Search <span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4>
</form>
</div>

Easiest way is with a get request:
<form class="form-home form-search" method="GET" action="used-cars.php">
<select name="make" class="form-control select-box">
.....
<button type="submit">Search</button>
</form>
and on used-cars.php:
var_dump($_GET['make']);
EDIT
lets suppose on the form on the first page you have:
<option value="ford">ford</option>
<option value="pontiac">pontiac</option>
<option value="fiat">fiat</option>
when you hit the submit button $_GET['make'] on used-cars.php will be whatever was selected lets say fiat.
so now on used-cars.php you can do this:
<?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC)){
$selected = $make['Make'] == $_GET['make']?'selected="selected"':'';
echo '
<option '.$selected.' value="'.$make["Make"].'">'.$make["Make"].'</option>
';
} ?>

We Keep Coding

JavaScript is the programming language of the Web.

toggle hidden label for element - javascript

It sounds like you're looking for $('label[for="' + this.name + '"]'). You can use the Attribute Equals selector to select elements with a specific attribute value.

Related

Not able to select hidden element from drop down list in Selenium Webdriver

bootstrap-select get the value and the text

Chosen-select multi-select - disable 2nd select based on selected.count of first

jQuery doesn't find existing element

jQuery: Save a select element option that has been selected

Categories

Resources