<tr class="form-row form-row-odd form-row-err form-cols-2 form_element_company_id">
<th>Company
<span class="required">*</span>
</th>
<td>
<select name="company_id" class="selectmenu input-inf select2-initialized select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<option value="">— None —</option>
<option value="1" class="sub-option-0 ">Option 1</option>
<option value="14" class="sub-option-0 ">Option 2</option>
<option value="45" class="sub-option-1 " data-parent-name="Option 2="14">Option 2-1</option>
<option value="46" class="sub-option-1 " data-parent-name="Option 2" data-parent-id="14">Option 2-2</option>
<option value="47" class="sub-option-1 " data-parent-name="Option 2" data-parent-id="14">Option 2-3</option>
<option value="29" class="sub-option-0 ">Option 3</option>
<option value="30" class="sub-option-0 ">Option 4</option>
<option value="31" class="sub-option-0 ">Option 5</option>
</select>
</td>
</tr>
I'm trying to create a function that will automaticaly pick an option from the select2 name="company_id" :
So far I have tried :
function setUserCompany(selector){
var companyField = selector;
if (companyField.length == 0) {
return;
}
var options = companyField.find('option')
if (options.length == 0) {
return;
}
var randomIdx = Math.floor((Math.random() * selector.length)+1);
var randomValue = $(options.get(randomIdx)).attr('value');
companyField.select2().val(randomValue).trigger('change');
}
^ doesn't seem to work properly aswell.
I think you want to get the random value or click on random option. You almost done just missed on getting the select box by css name. Try this,
var companySelectBox = browser.element(by.css('[name="company_id"]'));
companySelectBox.all(by.tagName('option')).then(function(options){
//random id between option length
var randomId = Math.floor((Math.random() * options.length)+1);
console.log('random id ' + randomId);
options[randomId].getText().then(function(text){
console.log('random option text ' + text);
});
//click on random option
options[randomId].click();
//TODO: whatever other task similar
});
Related
I've got a <select> form field, and onchange it runs a javascript function. If the function matches something specific, it shows new form field options located inside of a <div style="display: none;">
I've got a unique situation where I need to use this same code across multiple select boxes; however, each one has a specific name. They are not all the same and need to work independantly. Each one has a unique ID #.
I only want the second select field to show up if "ship with" is selected in the first field.
First, here is the code for the select field
<select name="first_select_option" onchange="ShowDiv(this);">
<option value="">Select Option</option>
<option value="SHIP WITH" id="SHIPWITH_<?php echo $data_order_id; ?>_Show">SHIP WITH</option>';
</select>
Here is the code for the hidden select field. There are multiple of these called dynamically on the page during a php while loop. That is why I am using the <?php echo $data_order_id; ?> inside the id of each one.
<div id="SHIPWITH_<?php echo $data_order_id;?>" style="display: none;">
<select name="secondhiddenselect">
<option value="">SELECT OPTIONS BELOW</option>
</select>
</div>
As you notice I am using a php variable inside the id. That is a unique id assigned to that specific select field inside a while loop. So the more while loops, the more select fields are pupulated, therefore, there end up being a bunch of select fields each with a unique ID all because of the $data_order_id
I need to modify the following script to not only work with a single SHIPWITH, but work with each individual SHIP WITH_{id}
<script type="text/javascript">
function ShowDiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
OptionValue = document.getElementById("NEWCC_Show").value;
if(OptionValue == nameSelect.value){
document.getElementById("NEWCC").style.display = "block";
}
else{
document.getElementById("NEWCC").style.display = "none";
}
}
else{
document.getElementById("NEWCC").style.display = "none";
}
}
</script>
I attempted to modify this and make it work by using .split('_') to break the variable up but its not working. I am not as good with JavaScript as I'd like to be. Here is my attempt...
<script type="text/javascript">
function ShowDiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
var name = nameSelect;
var splitName = name.split('_');
alert(splitName[1]);
OptionValue = document.getElementById(splitName[0] + splitName[1] + splitName[2]).value;
if(OptionValue == nameSelect.value){
document.getElementById(splitName[0] + splitName[1]).style.display = "block";
}
else{
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
else{
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
</script>
So even though there are multiple select fields, the JavaScript ONLY communicates with the specific one that corresponds with the $data_order_id.
Here is an updated snippet to help diagnose problem
function ShowDiv(nameSelect) {
console.log(nameSelect);
if (nameSelect) {
var name = nameSelect;
var splitName = name.split('_');
alert(splitName[1]);
OptionValue = document.getElementById(splitName[0] + splitName[1] + splitName[2]).value;
if (OptionValue == nameSelect.value) {
document.getElementById(splitName[0] + splitName[1]).style.display = "block";
} else {
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
} else {
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_11_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_11" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_21_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_21" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_33_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_33" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
As mentioned in the comments, it looks like you want to get the id of the selected option, not the select. One way of getting that is to use the selectedIndex property of the select in combination with its options collection (you could also use selectedOptions[0], among other techniques).
I've taken the liberty of "correcting" some naming conventions; generally, initial uppercase letters denote an object's constructor, not a plain function or variable. Also, using var (or let or const, depending on the need) before a variable assignment keeps it from becoming a global variable by default. There were a few other minor corrections made I'll leave to you to discover.
function showDiv(nameSelect) {
console.log(nameSelect);
if (nameSelect) {
var selectedOption = nameSelect.options[nameSelect.selectedIndex];
var name = selectedOption.id;
var splitName = name.split('_');
console.log(splitName[1]);
var idOfSection = splitName[0] + '_' + splitName[1];
var optionValue = selectedOption.value;
if (optionValue == nameSelect.value) {
document.getElementById(idOfSection).style.display = "block";
} else {
document.getElementById(idOfSection).style.display = "none";
}
} else {
// Commenting this out, since splitName will be undefined in this branch...
//document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_11_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_11" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_21_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_21" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_33_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_33" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
I am trying to make a simple "registry book" from a select HTML
The idea is 3 selecting options click confirm and based on the selected options make a price with a math formula or (don't know what is ) an array (in the sense of a table of like every var there) add a Hour:Minute from machine and place it in a paragraph.
It will work. (just learning HTML and CSS)
Math would be select2 * select3 with one exception in the case of [select2(option1 and option2) * select3 = samevalue)
With that aside can someone post a modular simplistic type of code that would Help.
For those who need to read some more:(copy&paste* - *Sorry for indentation)
document.getElementById("Confirm").onClick = function() {
var entry = ""
document.getElementById("Televizor").onChange = function() {
if (this.selectedIndex !== 0) {
entry += this.value;
}
};
document.getElementById("Controllere").onChange = function() {
if (this.selectedIndex !== 0) {
entry += this.value;
}
};
document.getElementById("Timp").onChange = function() {
if (this.selectedIndex !== 0) {
entry += this.value;
}
};
document.getElementById("Table").innerHTML = "<br> " + entry + Date();
var entry = ""
}
<h2>TV-uri</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">Date & Time.</button>
<p id="demo">Dunno</p>
<div class="container">
<select id="Televizoare">
<option value="0">Televizoare</option>
<option value="1">Tv 1</option>
<option value="2">Tv 2</option>
<option value="3">TV 3</option>
<option value="4">Tv 4</option>
<option value="5">TV 5</option>
<option value="6">Tv 6</option>
<option value="7">TV 7</option>
</select>
<select id="Controller">
<option value="0">Controllere</option>
<option value="1c">1 Controller</option>
<option value="2c">2 Controllere</option>
<option value="3c">3 Controllere</option>
<option value="4c">4 Controllere</option>
</select>
<select id="Timp">
<option value="0">Timp</option>
<option value="1h">1 ora</option>
<option value="1h2">1 ora 30 minute</option>
<option value="2h">2 ore</option>
<option value="2h2">2 ore 30 minute</option>
<option value="3h">3 ore</option>
</select>
<button id="Confirm" onclick="Confrim)">Confirm</button>
</div>
<p id="Table"></p>
Well, you could start off by making sure the spelling and capitalization of your IDs and function names match.
Also, you should create some form of a validation method to check if all the fields are valid before proceeding to the calculation method.
Not sure what you are multiplying, but if you can at least get the valuse from the form fields, that's half the battle.
You should also enclose all your fields within a form object so you can natively interact with the form in a traditional HTML fashion.
// Define the confirm clicke listener for the Confirm button.
function confirm() {
// Grab all the fields and apply them to a map.
var fields = {
'Televizoare' : document.getElementById('Televizoare'),
'Controllere' : document.getElementById('Controllere'),
'Timp' : document.getElementById('Timp')
};
// Determine if the user selected an option for all fields.
var isValid = doValidation(fields);
if (!isValid) {
document.getElementById("Table").innerHTML = 'Please provide all fields!';
return;
}
// Create listeners ???
fields["Televizoare"].onChange = function(e) { };
fields["Controllere"].onChange = function(e) { };
fields["Timp"].onChange = function(e) { };
// Set the value of the paragraph to the selected values.
document.getElementById("Table").innerHTML = Object.keys(fields)
.map(field => fields[field].value)
.join(' — ');
}
// Validation function to check if ALL fields have options selected other than 0.
function doValidation(fields) {
return [].every.call(Object.keys(fields), field => fields[field].selectedIndex !== 0);
}
<h2>TV-uri</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">Date & Time.</button>
<p id="demo">Dunno</p>
<div class="container">
<select id="Televizoare">
<option value="0">Televizoare</option>
<option value="1">Tv 1</option>
<option value="2">Tv 2</option>
<option value="3">TV 3</option>
<option value="4">Tv 4</option>
<option value="5">TV 5</option>
<option value="6">Tv 6</option>
<option value="7">TV 7</option>
</select>
<select id="Controllere">
<option value="0">Controllere</option>
<option value="1c">1 Controllere</option>
<option value="2c">2 Controllere</option>
<option value="3c">3 Controllere</option>
<option value="4c">4 Controllere</option>
</select>
<select id="Timp">
<option value="0">Timp</option>
<option value="1h">1 ora</option>
<option value="1h2">1 ora 30 minute</option>
<option value="2h">2 ore</option>
<option value="2h2">2 ore 30 minute</option>
<option value="3h">3 ore</option>
</select>
<button id="Confirm" onclick="confirm()">Confirm</button>
</div>
<p id="Table"></p>
How to make that the all selected options, not the values, but the actual text, would be displayed somewhere?
Html:
<h1>Made your PC:</h1>
<div>
<label>Processeor: </label><select id="processor" name="processor">
<option class="label" value>Select Processor</option>
<!-- Home Ware -->
<option value="P1">Processor 1</option>
<option value="P2">Processor 2</option>
<option value="P3">Processor 3</option>
<option value="P4">Processor 4</option>
</select>
</div>
<p><strong>Only compatible components will show.</strong></p>
<div>
<label>Select motherboard: </label><select id="motherboard" name="motherboard" class="subcat" disabled="disabled">
<option class="label" value>Select Motherboard</option>
<!-- Home Ware -->
<option rel="P1 P2" value="AS1">ASUS RAMPAGE V EXTREME</option>
<option rel="P2 P3" value="AS2">ASUS ATX DDR3 2600 LGA</option>
<option rel="P1 P3 P4" value="GB1">Gigabyte AM3+</option>
<option rel="P2 P4" value="MSI1">MSI ATX DDR3 2600 LGA 1150</option>
</select>
</div>
<div>
<label>Select RAM: </label> <select disabled="disabled" class="subcat" id="RAM" name="RAM">
<option class="label" value>RAM Memory</option>
<option rel="AS1 AS2 GB1" value="KI1">Kingston Value RAM</option>
<option rel="AS1 AS2 MSI1" value="P5KPL">P5KPL-AM SE</option>
<option rel="MSI1 GB1" value="960GM">960GM-VGS3 FX </option>
</select>
</div>
<div>
<label>Select Video Board: </label> <select disabled="disabled" class="subcat" id="video-card" name="video-card">
<option class="label" value>Video Card</option>
<option rel="MSI1 AS2" value="EVGA8400">EVGA GeForce 8400 GS</option>
<option rel="AS1" value="XFXAMD">XFX AMD Radeon HD 5450</option>
<option rel="MSI1 GB1" value="GTX750Ti">EVGA GeForce GTX 750Ti SC</option>
</select>
</div>
Javascript:
$(function(){
var $supcat = $("#processor"),
$cat = $("#motherboard"),
$subcat = $(".subcat");
$supcat.on("change",function(){
var _rel = $(this).val();
$cat.find("option").attr("style","");
$cat.val("");
if(!_rel) return $cat.prop("disabled",true);
$cat.find("[rel~='"+_rel+"']").show();
$cat.prop("disabled",false);
});
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel~='"+_rel+"']").show();
$subcat.prop("disabled",false);
});
});
I tried this one code that was posted earlier, but it only display one selection, right after picking, is there any way it could display all the selections and with my random text, like "Your selections"?:
<script>
function myNewFunction(sel)
{
alert(sel.options[sel.selectedIndex].text);
}
</script>
<select id="box1" onChange="myNewFunction(this);" >
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>
This should give the actual label text, not the value, for a given select-element.
$(selector).find(":checked").html()
So if you want to show all of them, you could do something like this:
$("#video-card").on("change", function () {
var choices = [];
$("select").each(function() {
choices.push($(this).find(":checked").html());
});
alert("You selected: " + choices.join(', '));
})
And here's a codepen for demo purposes
http://codepen.io/anon/pen/XbjKYQ
function myNewFunction(sel) {
alert($(sel).val());
}
This should actually be working.
If that doesn't work, try to place a window.setTimeout(function() { ... }, 10); around your alert. It's possible that the browser calls the myNewFunction() method before it updates the selection value when the user clicks on one option.
EDIT: If you want the text instead of the value, use
alert($(sel).find("option:selected").text());
You need to loop through each of the selects, not just the first one:
function updateOutput() {
var selects = document.getElementsByTagName('SELECT');
var output = document.getElementById('output');
var arr = [];
for (i=0; i < selects.length; i++) {
arr.push(selects[i].options[selects[i].selectedIndex].text);
}
output.innerHTML = arr.join('; ');
return arr;
}
In this case, I push all the values into an array and then join the array values at the end to create the final string.
I updated a codepen provided earlier: http://codepen.io/anon/pen/WvGxgz
I have a set of dropdown fields (using knockout.js) that is "dynamically" building two javascript functions that I use on my website and that I am triggering with a link.
The first function is building perfectly.
The second function uses the dropdown "Duration" to make the "VIP Plus 1 year" or "VIP Plus 2 years" options to appear/disappear and build the second function.
The problem is when I select "1 year" in "Duration" and then "Vip Plus 1" option, the correct sku is added to my second function, BUT if I change my mind and select "2 years" in Duration, the value stays in the second function and is added to the new "VIP Plus 2 years" sku in my output.
Ideally, if nothing is selected from the "VIP Plus 1 year" or "VIP Plus 2 years" dropdowns, the second function would just not appear at all.
This is probably very easy to solve but since I am a beginner in js, I'm stucked there...
See my preview at http://jsfiddle.net/X6fJ5/3/
<p>Membership : <select name="no1" data-bind="value: membership" />
<option value="NEW">New membership</option>
<option value="RENEW">Renew membership</option>
<option value="GIFT">Gift membership</option>
</select>
</p>
<p>Category : <select name="no2" data-bind="value: category" />
<option value="1400">VIP Individual</option>
<option value="709">VIP Family</option>
<option value="703">VIP ang Guest</option>
<option value="1389">VIP Student</option>
</select>
</p>
<p>Duration : <select name="no3" data-bind="value: duration" id="opts" onchange="showForm();" />
<option value="1" selected="selected">1 an</option>
<option value="2">2 ans</option>
</select>
</p>
<div id="f1" style="display:none">
<p>VIP Plus 1 year : <select name="no4" data-bind="value: vipplus1" id="opts" />
<option value="" selected="selected">No thanks</option>
<option value="DON-VIPPLUS1-125">VIP Plus 1</option>
<option value="DON-VIPPLUS1-250">VIP Plus 2</option>
<option value="DON-VIPPLUS1-500">VIP Plus 3</option>
</select>
</div>
<div id="f2" style="display:none">
VIP Plus 2 years : <select name="no5" data-bind="value: vipplus2" id="opts" />
<option value="" selected="selected">No thanks</option>
<option value="DON-VIPPLUS2-250">VIP Plus 1</option>
<option value="DON-VIPPLUS2-500">VIP Plus 2</option>
<option value="DON-VIPPLUS2-1000">VIP Plus 3</option>
</select>
</p></div>
<br />
Add to cart
<br />
<h3><span data-bind="html: mvipsku"> </span></h3>
<script type="text/javascript">
var ViewModel = function(membership, category, duration, vipplus1, vipplus2) {
this.membership = ko.observable(membership);
this.category = ko.observable(category);
this.duration = ko.observable(duration);
this.vipplus1 = ko.observable(vipplus1);
this.vipplus2 = ko.observable(vipplus2);
this.mvipsku = ko.computed(function() {
return "addMembershipToCart('" + "MVIP-" + this.membership() + "-" + this.duration() + "-" + this.category() + "');" + "<br />" + "addProductToCart('" + this.vipplus1() + this.vipplus2() + "');";
}, this);
};
ko.applyBindings(new ViewModel()); // This makes Knockout get to work
function showForm() {
var selopt = document.getElementById("opts").value;
if (selopt == 1) {
document.getElementById("f1").style.display = "block";
document.getElementById("f2").style.display = "none";
}
if (selopt == 2) {
document.getElementById("f2").style.display = "block";
document.getElementById("f1").style.display = "none";
}
}
</script>
You should subscribe to the change of duration and clear the apprpropriate VIP Plus setting:
self.duration.subscribe(function(newValue) {
if(newValue == '1') {
self.vipplus2(null);
} else if(newValue == '2') {
self.vipplus1(null);
}
});
JSFiddle
I have this select; to select countries and add to a new select multiple with a limit of 5 countries, but I just want to add 1 country by select or more countries if i do a multiple select.
My mistake is in my function addC(), when I want to add more than 1 country in my select, it add the several countries in 1 option tag like this:
<option>South KoreaUSAJapan</option>
What I can modify to display the following way if i do a multiple select?:
<option>South Korea</option>
<option>USA</option>
<option>Japan</option>
My code:http://jsbin.com/osesem/4/edit
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected").text());
$("#addCountry").append("<option>" + newC + "</option>");
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<label for="provincia2"><b>¿Country?</b></label><br>
<span>
<select multiple="multiple" size="5" id="countries">
<option value="1">South Korea</option>
<option value="2">USA</option>
<option value="2">Japan</option>
<option value="3">Italy</option>
<option value="4">Spain</option>
<option value="5">Mexico</option>
<option value="6">England</option>
<option value="7">Phillipins</option>
<option value="8">Portugal</option>
<option value="9">France</option>
<option value="10">Germany</option>
<option value="11">Hong Kong</option>
<option value="12">New Zeland</option>
<option value="13">Ireland</option>
<option value="14">Panama</option>
<option value="15">Norwey</option>
<option value="16">Sweeden</option>
<option value="17">India</option>
<option value="18">Morroco</option>
<option value="19">Russia</option>
<option value="20">China</option>
</select>
</span>
<div class="addremover">
<input class="add" type="button" onclick="addC()" value="Addd »" />
<br/>
</div>
<span>
<select id="addCountry" multiple="multiple" size="5">
</select>
</span>
use each function to loop through the text and append it..
try this
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected"));
newC.each(function(){
$("#addCountry").append("<option>" + $(this).text() + "</option>");
})
}
}
JSbin here
Or just clone the selected <option>'s
function addC() {
if ($('#countries option:selected').size() < 5)
{
$('#addCountry').append($('#countries option:selected').clone());
}
else
{
alert('you can only select 5');
}
}