Can I add JS in this code? My point is that when I click the button, it will find the car and open the link assigned to it.
<select class="selecttype" id="cars">
<optgroup label="RENAULT">
<option id="euro" href="mylink" value="euro1">Renault Euro 3</option>
<option id="euro" href="mylink" value="euro2">Renault Euro 4</option>
</select>
<button class="buttonsea" type="submit" onclick="btnclick">Search</button>
You need the () after the function name, to call the function.
<select class="selecttype" id="cars">
<optgroup label="RENAULT">
<option id="euro" href="mylink" value="euro1">Renault Euro 3</option>
<option id="euro" href="mylink" value="euro2">Renault Euro 4</option>
</select>
<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>
Then inside the function, you use this, to get the selected:
var cars = document.getElementById('cars')
var selectedCar = cars.options[cars.selectedIndex].value;
option element don't have href attribute, but you can send it as data-* attribute and extract it in the JS code. See the example below:
function btnclick() {
let cars = document.getElementById('cars');
let selectedCar = cars.options[cars.selectedIndex];
console.log(selectedCar.getAttribute('data-href'));
}
<select class="selecttype" id="cars">
<optgroup label="RENAULT">
<option id="euro" data-href="mylink1" value="euro1">Renault Euro 3</option>
<option id="euro" data-href="mylink2" value="euro2">Renault Euro 4</option>
</select>
<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>
If i use this code it opens in colsole
function btnclick() {
let cars = document.getElementById('cars');
let selectedCar = cars.options[cars.selectedIndex];
console.log(selectedCar.getAttribute('data-href'));
}
You can run with calling javascript like this.
I already give a Javascript Result in this code with data-href inside data-* Attribute
Because you can't input href into a Option Selected bcoz Don't have Attribute
See the example below:
function btnclick() {
let cars = document.getElementById('cars');
let newSelect = cars.options[cars.selectedIndex];
let name = newSelect.getAttribute('data-href');
let result = document.getElementById('result');
result.innerHTML = "<a href='" + name + "'>" + name + "</a>";
}
<select class="selecttype" id="cars">
<optgroup label="RENAULT">
<option id="euro" data-href="mylink1" value="euro1">Renault Euro 3</option>
<option id="euro" data-href="mylink2" value="euro2">Renault Euro 4</option>
</select>
<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>
<br>
<br>
<span id="result"></span>
I made like this and it works :D
function btnclick() {
let cars = document.getElementById('cars');
let selectedCar = cars.options[cars.selectedIndex];
window.open(selectedCar.getAttribute('href'));
}
You can test the solution here https://jsfiddle.net/2pz9se0q/3/
HTML
<select class="selecttype" id="cars">
<optgroup label="RENAULT">
<option data-href="mylink1" value="euro1">
Renault Euro 3
</option>
<option data-href="mylink2" value="euro2">
Renault Euro 4
</option>
</optgroup>
</select>
<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>
Note:
1- that I deleted the id="euro", you can not give the same id to many tags
2- option group most be closed by </optgroup>
js
function btnclick() {
let cars = document.getElementById('cars');
let selectedCar = cars.options[cars.selectedIndex];
let link = selectedCar.getAttribute('data-href');
window.open(link, '_blank');
}
Description:
when you click the button the function btnclick() will be fired.
this function will get the element with id cars.
from the element options, it will take the selected option only and save it on selectedCar
by using the element selectedCar we can access the data-href attribute and take the link
to open the link on a new window we added '_blank'
Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
Related
I have a example code here:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
I want to swap se1 and se2 . Here is my code i tried:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
It's work but it require Jquery 1.2.3 but i want to use Jquery 2.1.3. If i change script url to "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" but it isn't work
Thanks for help!
You shouldn't be swapping the values or the text of the two selected items in the lists. You just need to swap which item is selected in each list. Once that is done, that option will have whatever value the list has set up for it.
The version of JQuery you use here doesn't matter since what you are doing requires JQuery operations that have been in JQuery since the beginning.
var sel1 = $("#se1");
var sel2 = $("#se2");
function swap() {
let selection1 = sel1[0].selectedIndex; // Store the first list's selection
sel1[0].selectedIndex = sel2[0].selectedIndex;
sel2[0].selectedIndex = selection1;
// Test
console.log(sel1.val(), sel2.val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
I'm not familiar with javascript and jQuery and I'm asking you.
I would like the code of a product to be selected, once I have selected it from the select dropdown, I click the button and it should add the value in an input box text, that I have created, so that I can also accumulate more codes of more products.
Keep in mind that once the button is clicked, the same value is no longer added indefinitely but that it is possible to choose another code and add it next to the one already present in the input text.
I don't know if it is more practical to use the <input type = "submit"> tag instead of the button tag to send or in this case transfer the selected text from the select to a text form.
You would save my life if you could please complete this action for me with javascript or jQuery :)
<select class="select" id="select-code">
<option value="">Select a code</option>
<option value="value1">Code 1</option>
<option value="value2">Code 2</option>
<option value="value3">Code 3</option>
<option value="value4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input name="my-quote" type="text" placeholder="code1,code2...">
First of all, it seems that you are complete beginner. so you should learn DOM api to learn how to manipulate the window.
Anyway here is the code to do so which you want;
document.getElementById('code-btn').onclick = () => {
let e = document.getElementById('select-code');
document.getElementById('input').value = e.options[e.selectedIndex].text;
}
<select class="select" id="select-code">
<option value="">Select a code</option>
<option value="value1">Code 1</option>
<option value="value2">Code 2</option>
<option value="value3">Code 3</option>
<option value="value4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input id='input' name="my-quote" type="text" placeholder="code1,code2...">
document.getElementById('code-btn') gets the element with id 'code-btn'. As that is a button, we can use onclick property which will will take a function and that function will be called when it is clicked.
Inside that function, i am simply getting the input field and setting its value to the text of the selected option from dropdown.
I think the code here is self-documented.
This isn't a direct answer to your question, but an alternative solution. If possible for your situation, I would consider using <select multiple>: the select tag with the "multiple" attribute. It's a native HTML feature that allows the user to select multiple options from the list. I don't know how you're submitting the form data, but if using a <form> tag then the form's data will include which values have been selected.
Tutorial about select multiple
<label for="select-code">Select a code</label>
<select class="select" id="select-code" multiple>
<option value="value1">Code 1</option>
<option value="value2">Code 2</option>
<option value="value3">Code 3</option>
<option value="value4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input id='input' name="my-quote" type="text" placeholder="code1,code2...">
This is actually very simple and might be used as beginers excercise, so I'm gonna give you a brief walkthrough of how I would solve it:
register button onClick event
read selected value
add it to the placeholder attribute
so something like this (not tested at all)
//button click event
$("#code-btn").click(function (event) {
//in element #select-code
var textToAdd = $('#select-code')
//find element with pseudo selector :selected
.find(":selected")
//get its inner text
.text();
//check if input already contains the text here, if not
if (!$("input").attr("placeholder").includes(textToAdd)) {
//into input element
$("input")
//into attribute placehoder
.attr("placeholder",
//insert original text //insert colon //insert new text
$("input").attr("placeholder") + ", " + textToAdd)
}
});
function myFunction() {
var newText = document.getElementById('select-code').value
var input = document.getElementById('my-quote')
if (input.value == '') input.value = newText
else input.value = input.value + ', ' + newText
}
<select class="select" id="select-code" onchange='myFunction()'>
<option value="">Select a code</option>
<option value="Code 1">Code 1</option>
<option value="Code 2">Code 2</option>
<option value="Code 3">Code 3</option>
<option value="Code 4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input id="my-quote" type="text" placeholder="code1,code2...">
This question already has answers here:
Get selected value in dropdown list using JavaScript
(32 answers)
Closed 6 years ago.
I have two select tags in my page. Each of these have several options within. Now I want to access only the second select box, but since I have used getElementByTagName("options") so it is fetching only the first option tag.I am unable to access the second option tags.
My code is here:
function myFunction() {
var x = document.getElementById("mySelect_two").selectedIndex;
alert(document.getElementsByTagName("option")[x].value);
}
<!DOCTYPE html>
<html>
<body>
Select your favorite fruit:
<select id="mySelect_one">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
<select id="mySelect_two">
<option value="India">India</option>
<option value="Nepal">Nepal</option>
<option value="Spain">Spain</option>
<option value="Mexico">Mexico</option>
</select>
<p>Click the button to return the value of the selected fruit.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
you need to get elements by tag name on the select rather than entire document
function myFunction()
{
var select = document.getElementById("mySelect_two");
var x = select.selectedIndex;
alert(select.getElementsByTagName("option")[x].value);
}
with options
var sel = document.getElementById("mySelect_two");
var selectedIndex = sel.selectedIndex;
var value = sel.options[selectedIndex].value;
with getElementsByTagName
var sel = document.getElementById("mySelect_two");
var selectedIndex = sel.selectedIndex;
var value = sel.getElementsByTagName("option")[selectedIndex].value;
Use below script to get selected options value:
var e = document.getElementById("mySelect_two");
var str = e.options[e.selectedIndex].value;
alert(str)
<select id="mySelect_two">
<option value="India">India</option>
<option value="Nepal" selected>Nepal</option>
<option value="Spain">Spain</option>
<option value="Mexico">Mexico</option>
</select>
I am trying to make a drop-down(B) menu that is hidden at first and when a different form(A) is completed, then this drop-down(B) menu is shown. However, when the page loads, the second drop-down(B) menu is not hidden. Code is below and stored in a php file
<h4>And What Type of Data Are You Focusing On?</h4>
<select name="library_type" id="library_type">
<option value="DNA"> DNA </option>
<option value = "RNA"> RNA </option>
<option value="WGS"> Whole Genome Sequences</option>
<option value="WXS">Whole Exome Sequences</option>
<option value="RNA-Seq">RNA-Seq</option>
<option value = "miRNA-Seq">miRNA-Seq</option>
<option value = "VALIDATION">VALIDATION</option>
<option value = "AMPLICON">AMPLICON</option>
<option value = "ChIP-Seq">ChIP-Seq</option>
<option value = "Bisulfite-Seq">Bisulfite-Seq</option>
<option value = "TARGET_60">TARGET_60</option>
<option value = "TARGET_50">TARGET_50</option>
<option value = "TARGET_61">TARGET_61</option>
<option value = "OTHER">OTHER</option>
</select>
<h4> What Condition are You Interested in? </h4>
<select name="tissueState" id="tissueState">
<option value = "Normal"> Normal </option>
<option value = "Tumor"> Tumor </option>
<option value = "Both"> Both </option>
</select>
<br><br>
<input type="submit" value="Show me Matches">
</form></center>
In a separate file, hideDropDownMenu.js, this is the content of that file.
$("#tissueState").hide();
$(document).ready(function)(){
$('#library_type').change(function(){
var value = $(this).val();
});
});
In the head of the .php file I have this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="hideDropDownMenu.js"></script>
Here is how the page looks
Your code is buggy...
First of all close correctly the document ready and change event.
From this } to this });
And this $(document).ready(function)(){ must change in $(document).ready(function(){
This is the corrected code:
<script>
$("#tissueState").hide();
$(document).ready(function(){
$('#library_type').change(function(){
var value = $(this).val();
});
});
</script>
Try it: https://jsfiddle.net/ougvw8kk/
In order to hide the dropdown during page load, you need to declare the hide statement inside document ready function.
$(document).ready(function)(){
$("#tissueState").hide();
$('#library_type').change(function(){
var value = $(this).val();
});
});
I have a select tag where it contains some values, as shown below:
<select id="menu" SIZE=6 onChange="go()">
<option value="">Select city</option>
<option value="delhi" >delhi</option>
<option value="kolkata" >kolkata</option>
<option value="mumbai" >mumbai</option>
</select>
Now i am using below script for this, where it get the selected value from the drop down,
<script>
function go(){
var sel = document.getElementById('menu');
var sv = sel.options[sel.selectedIndex].value;
// here i need to make a specific link using this selected drop down value
}
</script>
I just need to know how can i make use of this selected value and go to specific link like
window.location.href='getCityDetails.jsp?c=sv'; // this is not working properly
Can anyone suggest me best solution for this.
<script>
function go(){
var sel = document.getElementById('menu');
var sv = sel.options[sel.selectedIndex].value;
window.location.href='getCityDetails.jsp?c=' + sv;
}
</script>
Hope it helps you
HTML :
<select id="menu" SIZE=6 onChange="go(this.value)">
<option value="">Select city</option>
<option value="delhi" >delhi</option>
<option value="kolkata" >kolkata</option>
<option value="mumbai" >mumbai</option>
</select>
Javascript :
function go(desination){
if (destination != ''){
window.location.href='getCityDetails.jsp?c=' + desination;
}
}
you need to concatenate the string properly. try this:
window.location.href='getCityDetails.jsp?c=' + sv;
-- You can use--
var TaskType = document.form1.SelTaskType.value;
-- TaskType will display selected option from below
<select id="SelTaskType" name="SelTaskType" >
<option selected>-- select --</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>