Bookmarklet to search input text and select from dropdown list - javascript

i wanted to create Bookmarklet which i key-in input, then it search and select from dropdown list in webpage.
i have some code below, but it not working.
thanks.
<select name="ctl00$ContentPlaceHolder1$dtgLot" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$dtgLot\',\'\')', 0)" id="ctl00_ContentPlaceHolder1_dtgLot" style="width:200px;">
<option selected="selected" value=""></option>
<option value="!E625163.05">!E625163.05</option>
<option value="1E001196">1E001196</option>
<option value="1E001242.08">1E001242.08</option>
<option value="1E001492.03">1E001492.03</option>
<option value="1E001493.02">1E001493.02</option>
</select>
Bookmarklet code
javascript:document.getElementsByName("ctl00$ContentPlaceHolder1$dtgLot")[0].value = 1E001196;document.getElementsByName("ctl00$ContentPlaceHolder1$dtgLot")[0].onchange();

javascript:document.querySelector(`select[name="ctl00$ContentPlaceHolder1"] option[value="${prompt('Search value:')}"]`).value = true

Related

selectize js search not working

Search option is not working with single select although It is working with multi select.
Below is the code:
html:
<select id="select-name" placeholder="Select a person..." >
<option value="4">Thomas Edison</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
js:
$(function() {
$('#select-name').selectize();
});
This is not documented, I believe, and I find it the hard way by comparing the provided samples. You have to add an option with the value of "" to get that result.
<select id="select-name" placeholder="Select a person..." >
<option value="">Select a Person</option>
<option value="1">Person 1</option>
<option value="2">Person 2</option>
</select>

Jquery change multiple select buttons with a select button

I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/

How to copy and paste an html select selected value to other selects

I have developed a site with multiple select elements in the same form
<select>
<option value="">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</select>
There are 8 selects with the exact same options on the page.
The user wants to copy and paste the selected values of a select from one to another.
The end user initiates it by using Ctrl+C, Ctrl+V. The web app was written to replace an excel app which allows copy and paste by the end user
However an html select doesn't support copy and paste. (Ctrl+C, Ctrl+V)
What can I do?
Any plugin that can maybe do this? Any minimal autocomplete select to suggest that looks like the standard select?
Edit:
Using the datalist example can be a solution. Only problem is that it allows invalid text i.e. text that is not one of the select options (apart from nothing) to be typed in. How do I only allow valid text?
See #Hashbrown answer in Copy selected item's text from select control html question. Sure it would help you as it's partially match your question.
Also you can take a look on How do I copy to the clipboard in JavaScript? as it has a lot of info related to your question.
Good Luck!
You should use datalist and handle none valid input as follow:
$('input[list]').on('change', function() {
var options = $('option', this.list).map(function() {
return this.value
}).get();
if (options.indexOf(this.value) === -1) {
this.value = "";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="food1" name="food1" placeholder="Select...">
<datalist id='food1'>
<option disabled>Select ...</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>
<input list="food2" name="food2" placeholder="Select...">
<datalist id='food2'>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>
Try using datalist
<input list="foods" name="food">
<datalist id='food'>
<option value="1">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</datalist>
http://www.w3schools.com/tags/tag_datalist.asp
Set the "value" attribute of one select to that of another with
document.getElementById('[select element1]').value = document.getElementById('[select element2]').value;
You can put this in the onClick handler for a button if you want.
Try this code
var src=document.getElementById('src');
var des=document.getElementById("des");
var opt=document.createElement("Option");
opt.value = src.options[src.selectedIndex].value;
opt.text = src.options[src.selectedIndex].text;
des.options.add(opt);
See the datalist element: http://www.w3schools.com/tags/tag_datalist.asp
It is used like this:
<input list="browsers" name="browserselect" type="text"/>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
The list attribute of the input element tells the input element to use the datalist with that id.
<select name="a" id="a">
<option value="1">abc</option>
</select>
<select name="b" id="b">
<option value=""></option>
</select>
<script type="text/javascript">
$('select#a').on('change',function(){
var v = $(this).val();
$('select#b').val(v);
});
</script>

I need to change link in HTML when an option on select, selected

I have a select option with 4 languages, and I want when I choose a language to link it to it's HTML.
<select>
<option value="Hebrew">עברית</option>
<option value="English">English</option>
<option value="Arabic ">العربية</option>
<option value="Russian">русский</option>
</select>
And then change
<div class="selected selected-tab-2-color mobile">
<a href="tab2.html">
<span>עסקים ומוסדות</span>
</a>
<div class="show-triangle triangle-color-2"></div>
</div>
To <a href="left-to-right/tab2.html">
You can use onchange event in the select box.
Try this code:
<SELECT onchange="window.location.href=this.options [this.selectedIndex].value">
<option value="Hebrew.html">עברית</option>
<option value="English.html">English</option>
<option value="Arabic.html">العربية</option>
<option value="Russian.html">русский</option>
</SELECT>
For example, consider a website: http://www.example.com/.
If the user changes the select box to English, then the browser will be redirected to http://www.example.com/English.html.
$('select').on('change', function(){
var langVal = $(this).val();
$('.mobile a span').text(langVal);
});
Above solution will change the span text according to your select option
You can use onChange for your solution.
<select onChange="window.location.href=this.value">
<option value="www.google.de">Google</option>
<option value="www.yahoo.com">Yahooo</option>
<option value="left-to-right/tab2.html">עברית</option>
<option value="left-to-right/tab2.html">English</option>
<option value="left-to-right/tab2.html ">العربية</option>
<option value="left-to-right/tab2.htmlian">русский</option>
</select>

how to select a particular drop down option element

I want to use this function to work on all my drop down lists. Problem: the first drop down works okay, but hen I try select any option in the 2nd drop down selections. It places the value from the first group in the span of the second group. I want the span to have the value from its own group. I would like to use this on multiple groups.
<script>function displayResult(xspan,xselect)
{
var x=document.getElementById(xselect).selectedIndex;
alert(x);
var newTxt = document.getElementsByTagName("option")[x].value;
document.getElementById(xspan).innerHTML = newTxt;
//alert(document.getElementsByTagName("option").length);
}
</script>
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
<option value="">Phone Numbers</option>
<optgroup label="Shipping">
<option value=" - 800-463-3339">FedEx</option>
<option value=""></option>
</optgroup>
</select>
<span id="ShowPhone"></span>
<select id="myParts" onchange="displayResult('ShowParts','myParts')">
<option value="">Qik Parts list</option>
<optgroup label="BATT">
<option value="1">1</option>
<option value="2">1</option>
<option value="2">1</option>
<option value="2"><1/option>
</optgroup>
</select>
<span id="ShowParts"></span>
Chage the id and the displayResult of the second dropdown:
First dropdown:
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
Second dropdown:
<select id="NewNameID" onchange="displayResult('ShowPhone','NewNameID')">

Categories