Develop Reference

JaveScript Select the dropdown list by the text of options

Is it possible to select the dropdown list by using the display-text of the options in the console(JavaScript)?
In my workplace, I need to fill a web form every day. But the options are too much to load, so I hope to use the Chrome console to select the option instead of using the mouse to click.
For now, I can use Value to select the option, but when I try to use the text, it fails.
The HTML sample and the JavaScript I used are as below. Could someone help?
Success - document.querySelector("#sel").value = 123
Fails - document.querySelector("#sel").text = "Product A"
<select>
<option value="123"> Product A </option>
<option value="243"> Product B </option>
<option value="212"> Product C </option>
<option value="466"> Product D </option>
</select>

Array.from(document.querySelectorAll('option')).find(el => el.textContent === 'Product A');

Truly sorry for the confusing example.
After trying lots of solutions, the final coding as below:
var txt = prompt();
for (i = 0; i < document.querySelector("#sel").options.length; i++) {
if(document.querySelector("#sel").options[i].text == txt){
document.querySelector("#sel").options[i].selected = true;
break;
}
}
With these codes, the User can select the specific options by entering the name of the product instead of clicking the dropdown list with the mouse and crash the browser.

angular best practice for select show options when other select changes

i'm trying to build a select box that trigger show on options of other select in angular way.
the json that i use build select boxs is
[
{"item_id":1,"item":"rubber","type":"x","facility":"school a"},
{"item_id":2,"item":"pen","type":"x","facility":"school b"},
{"item_id":3,"item":"book","type":"y","facility":"school b"},
]
what i need is 3 select boxes, first one shows all unique type. in above json that would be 'x,y'.
when user select one of them, then it should show all unqiue facility values in other selectbox that has same type as selected.
--if user selected x, then it would show school a and school b
when user select facility, a 3rd selectbox show all uiqiue item as label, and item_id as value where facility = selected facility
<select ng-model="selected.type">
<!-- need to show unique types here -->
</select>
<select ng-model="selected.facility">
<option ng-repeat="s in json" ng-if='selected.type == s.type'>{{s.item}}</option>
</select>
<select ng-model="selected.item">
<option ng-repeat="s in json" ng-if='selected.facility == s.facility'>{{s.item}}</option>
</select>
Current solution
currently what i'm doing is that i wrote a filter
.filter('unique', function() {
return function (arr, field) {
var r = [],final=[];
for(i in arr){
if(r.indexOf(arr[i][field]) == -1){
r.push(arr[i][field]);
final.push(arr[i]);
}
}
return final;
};
})
and doing
<select class="form-control" ng-model="nrequest.facility">
<option ng-repeat="s in facility_services |unique:'facility'" value="{{s.facility}}">{{s.facility}}</option>
</select>
<select class="form-control" ng-model="nrequest.item">
<option ng-repeat="s in facility_services" ng-if='s.facility == nrequest.facility'>{{s.item}}</option>
</select>
it works yet i'm not sure if this is correct way to do it angular way, since i'm still learning this new toy i was hoping for some directions on how to achieve this using ngoptions, or other angularjs best practice

jQuery - Each loop to select all items by data attribute, but also dependent on select (option) values

I am in the process of building an e-Commerce shop and have hit a small bump in the road for my actual product page. Based on any product options set that would add to the price if selected, I would like to be able to update the price on the page live when these options have been added. I have managed to iterate through every element with a "data-price-effect" attribute attached to them, HOWEVER, when it comes to a select element, I would need to check if the item is selected as an option, each option has their respective price change attribute of course, but the value would only update to the actual select element.
Here is my code upto now:
function updatePrice(){
$('[data-price-effect]').each(function( index ) {
// do something
});
}
Basic HTML set-up to explain further:
<form>
<input type="text" name="foo" onchange="updatePrice();" data-price-effect="10.00" />
<select name="bar" onchange="updatePrice();">
<option selected value="Item1" data-price-effect="5.00">Item 1</option>
<option selected value="Item2" data-price-effect="8.00">Item 2</option>
<option selected value="Item3" data-price-effect="10.00">Item 3</option>
</select>
</form>
I have NO idea how to even logically do this, not even with some huge messy code. Any pointers here from someone more experienced with Javascript?

Instead of having "updatePrice()" on each element, you could have a listener for all form elements for the function:
var EffectElements = $('form input[data-price-effect], form select');
EffectElements.on('change', function() {
var PriceEffect = 0;
EffectElements.each(function() { // Loop through elements
if ($(this).is('select')) { //if this element is a select
$(this).children().each(function() { //Loop through the child elements (options)
if ($(this).is(':selected')) { //if this option is selected
PriceEffect += parseFloat($(this).attr('data-price-effect'));
}
});
} else {
PriceEffect += parseFloat($(this).attr('data-price-effect'));
}
});
});
You could then use the PriceEffect variable to update your price on the website.
Ultimately it's the IS function doing the dirty work you needed ~_o
Working Example

customize java script function from particular page when that method is used by many pages

I have a drop down like
<select>
<option value="">Select</option>
<option value="1">ABC</option>
<option value="2">DEF</option>
</select>
I have the same select box in more than 10 places in different pages.This is populating through ajax.But when i am calling this from a particular page i need to select ABC by default.But i don't want in remaining places.
I don't want to write the code again in my page.Is there any possibility for this.
Thanks in advance...

It's going to be a very generic answer that you'll have to modify for your needs, but if the select and all other markup is the same on all pages, which is very unlikely, you have to check the URL to see if you're on a certain page.
At the bottom of the page, before </body>, you can do something like :
if ( window.location.href.indexOf('/mysite.html') != -1 ) {
document.getElementsByTagName('select')[0].value = '1';
}
This will set the default value of the first select on the page to 1, and show ABC, if the URL contains mysite.html.
FIDDLE

Here you have another example (with JQuery) taking into account the comment you did about loading your combos with options obtained with ajax: Try if yourself
JQUERY:
var options = "<option value=\"\">Select</option><option value=\"1\">ABC</option><option value=\"2\">DEF</option>";
function test() {
// Populate select with ID destiny 1 without selecting a value
populate("#destiny1", null, options);
// Populate select with ID destiny 2, selecting the value of the first index
populate("#destiny2", 1, options);
}
function populate(destiny, indexOption, options) {
$(destiny).html(options);
if (indexOption != null) {
$(destiny + " option")[indexOption].selected = true;
$(destiny).trigger("change");
}
}
HTML:
<select id="destiny1"></select>
<select id="destiny2"></select>
<input type="button" onclick="test()" value="TEST"></input>

jquery clone drop down list

Hi i have following scenario of drop down list
Whenever i select cat1 options, sub cat 1 options will be populated. But if i add another category
it should only add cat1 options not along with sub cat options.But in my case both of cat 1 and sub cat options are loaded. Following are my code to clone drop down list.
<div class="new-categories">
<div class="new-category">
<select class="category-select" name="categories">
<option></option>
<option value="1">cat 1</option>
</select>
<select class='category-select-sub' style="display:none">
<!-- loaded from ajax -->
</select>
</div></div>
Add another category
$('.add-another-cat').click(function(event){
event.preventDefault();
var $orDiv = $('.new-category:last').after($('.new-category:first').clone());
});
This is how i actually supposed to look like
Thanks.
update: populate ajax result
$('div.new-categories').on('change', 'select.category-select', function () {
var $newselect = $('<select />').addClass('category-select-sub');
$(this).parent().append($newselect);
var cat_id = $(this).val();
$.ajax({
url:baseUrl+'categories/getsubcat',
data:{'id':cat_id},
dataType:'json',
async:false,
type:'POST',
success:function(data){
var subhtml = data;
$('.category-select-sub').show();
$('.category-select-sub').html(subhtml);
}
});
});
Once new cat list has been added and an option is selected, the first sub cat are changing according to new list. How to prevent this?

Your code doesn't make sense to me, but this is what I think you are trying to do. Correct me if I am wrong.
"I would like to clone the div new-category and append it to the div new-categories. I only want the first select list cloned, not anything else.
http://jsfiddle.net/HZp5M/
$('a.add-another-cat').click(function(e) {
e.preventDefault();
//clone the first div
var $newdiv = $('div.new-category:first').clone();
//remove the second select (if there is one)
$newdiv.children('select.category-select-sub').remove();
//append new div
$('div.new-categories').append($newdiv);
});

http://jsfiddle.net/SCArr
<script src="//code.jquery.com/jquery-latest.js"></script>
<div id="clone" class="new-category" style="display:none;">
<select class="category-select" name="categories">
<option></option>
<option value="1">cat 1</option>
</select>
<select class='category-select-sub' style="display:none">
<!-- loaded from ajax -->
</select>
</div>
<div class="new-categories">
</div>
Add another category
<script>
$('.add-another-cat').click(function(event){
event.preventDefault();
var $orDiv = $('.new-category:last').after($('#clone').clone().removeAttr('id').show());
});
$('.new-categories').html($('#clone').clone().removeAttr('id').show());
</script>

I would like to see how you have the second sub select menu as it might affect the solution.
Solution 1 - better creation with an empty state
the problem is in your HTML structure
<div class="new-category">
<select class="category-select"> ... </select>
<select> ... </select>
</div>
When you clone .new-categories you clone both select elements.
You need to reconstruct your HTML so you will clone only what you want.
There will be something you will need to create by yourself without a clone.
For example, something like this:
$('.new-category:last').after( $("<div/>")
.addClass("new-category").append($('.category-select:last').clone()).append($("<select/>").addClass(".category-select-sub").hide());
Solution 2 - empty the sub select after clone
a jsfiddle that shows how to empty a select
What to do about auto-populating the sub select affecting all?
This is easy, your code explicitly refer to all sub selects. see the you code saying
$('.category-select-sub').show().html(subhtml);
This code means - set this HTML to all ".category-select-sub" elements. But you want only a specific element with this class - not all..
You should only refer to the sub select you created - which is easy as you already have a reference to it - so the success function should have something like this :
$newselect.show().html(subhtml);