How can I convert this JavaScript into jQuery?
The purpose of this is to auto-select the value of a dropdown that matches.
JS code :
window.onload = function(){
document.getElementsByName("title")[0].value="the_title_value";
}
You can select the elements by their name attribute, then get the :first of them before setting the current val(), like this:
$(window).on('load', function() {
$('select[name="title"]:first').val('the_title_value')
});
$(document).ready(function(){
$('select[name="title"]').first().val("the_title_value");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select name="title">
<option value='the_title_value1'>1</option>
<option value='the_title_value'>2</option>
<option value='the_title_valu3'>3</option>
</select>
$(document).ready(function(){
$('[name="title"]').val("the_title_value");
})
you only need first() if you have many elements with name="title" on the page. The reason why you have to put [0] in vanila javascript is because
document.getElementsByName("title")
returns an array of elements, even if there is only one with this name.
window.onload = function() {
// document.getElementsByName("title")[0].value="the_title_value";
// get all items with name "title" and then reduce the result set to the first element and then set the value
$('[name="title"]').first().val("the_title_value");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="title">
<option value='the_title_value_1'>the_title_value_1</option>
<option value='the_title_value'>the_title_value</option>
<option value='the_title_value_3'>the_title_value_3</option>
</select>
You could use :eq and name selector inside ready function to achieve that , check the example bellow.
Hope this helps.
$(function(){
$("select[name='title']:eq(0)").val('second');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="title">
<option value='first'>First 1</option>
<option value='second'>Second 2</option>
<option value='third'>Third 3</option>
</select>
Related
In the above example the console logs a value of 1 which is the currently selected option. How can you log the <select> tag's value of 2?
$(document).ready(function() {
console.log($('.mySelect').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mySelect" value="2">
<option value="1" selected>Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select>
This is not valid HTML syntax.
Use data attributes like data-someattr for values you want to pass.
This would work for you .
console.log( $('.mySelect[value=2]').val() );
I have many select options lists <select> and on change of one of them I want to apply some action to the others except the current one i.e the active list that triggered change event. I follow code like the following:
<select class="ops">
<option>Select</option>
<option value="1">One</otption>
<option value="2">Two</otption>
<option value="3">Three</otption>
<option value="4">Four</otption>
</select>
<select class="ops">
<option>Select</option>
<option value="1">One</otption>
<option value="2">Two</otption>
<option value="3">Three</otption>
<option value="4">Four</otption>
</select>
<select class="ops">
<option>Select</option>
<option value="1">One</otption>
<option value="2">Two</otption>
<option value="3">Three</otption>
<option value="4">Four</otption>
</select>
<select class="ops">
<option>Select</option>
<option value="1">One</otption>
<option value="2">Two</otption>
<option value="3">Three</otption>
<option value="4">Four</otption>
</select>
<script>
$(document).ready(function(){
var basicObj;
$("select.ops").change(function(){
basicObj = $(this);
$("select.ops").each(function(){
if ($(this) !== basicObj){
// do something
$(this).css('color','red');
}
})
})
})
</script>
The problem here is if ($(this) !== basicObj) always evaluated as true so, for example, when the first select list changed, its color changed to red too! this code demo
Reason why not working :
Note that jQuery selectors return the Jquery collection of selected objects, mean that they never be equal in the sense of reference equality.
To compare Jquery objects, is() function
Description: Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
To check jquery objects equals you should have tried !$(this).is(basicObj)
<script>
$(document).ready(function(){
$("select").change(function(){
var basicObj = $(this);
$("select").each(function(sel){
debugger;
if (!$(this).is(basicObj)){
// do something
$(this).css('color','red');
}
})
})
})
</script>
Demo
I am trying to get the name of all selected items from select multiple="multiple" options dropdown.
In my html page, I have the following code snippet:
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
In my JS file, I have the following code snippet:
var categoryNameArray = $('#ddlCategory').val();
console.log("category = " + categoryNameArray[0];
However, the variable categoryNameArray only gives me the array of the selected items, what I want is the name of the selected items. Can someone tell me a way how I can make this work? Thanks!
Since val isn't giving you what you want, I'm going to assume you want an array of the text of the selected items.
You can get that like this:
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
That finds all the selected items, then uses map to get the text of each of them (wrapped in a jQuery object), then uses get to turn that jQuery object into an array.
You can probably use return this.text; rather than return $(this).text();, since HTMLOptionElement has a text property (which most elements don't), but I'd be sure to test with my target browsers to be sure.
Example:
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Example with this.text instead of $(this).text():
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return this.text;
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
val() returns the values on the selected options, in your case 1, 2 .... You should use text() to get the names of the selected options. You can loop through all selected options using each() method and get the selected values using text():
$('a').on('click', function(e) {
e.preventDefault();
$('#ddlCategory option:selected').each(function(i, selected) {
console.log($(selected).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
Send
You can read more on how val() works here.
You can read more on how text() works here.
Try this:
var categoryNameArray =
$('#ddlCategory option:selected').map(function(){
return this.text;
}).get();
console.log("category = " + categoryNameArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option selected="selected" value="2">Restaurant</option>
<option value="3">Coffee Shop</option>
<option value="4">Hotels</option>
</select>
Easy way to get all selected value is $('#ddlCategory').val();
does anyone know if there is a way to make a dropdown menu that when an option is chosen it then turns that option into a button using html or is that only possible in php or is it not possible at all
You will have to learn javascript to be able to do that, there is an event fired called onselect, when you bind to that event with javascript using addEventListener you will be able to read the .value of the <select> field and then create a button using the createElement method.
Try this with jQuery
<script>
$(document).ready(function(){
var sel_html = $('#element_place').html();
$('#select_button').change(function(){
var sel_option = $('#select_button').val();
$('#select_button').remove();
new_ele = $('<input>').attr('type','button').attr('value',sel_option);
$('#element_place').append(new_ele);
});
});
</script>
<div id="element_place">
<select id="select_button">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
You can use this its working
Html
<input type="button" id="conv_but" value="" style="display:none">
<select name="data_select" id="data_select" onchange="converttobutton(this.value);">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
</select>
Javascript
<script type="text/javascript">
function converttobutton(selected)
{
document.getElementById('conv_but').value = selected;
document.getElementById('data_select').style.display = 'none';
document.getElementById('conv_but').style.display = '';
}
</script>
I think you need change() event handler . Create a function inside the change() event for creating the button
$("ID of the dropdownbox").change (function () {
//code for creating button(this.value) give the selected option
var $something= $('<input/>').attr({ type: 'button',
name:'btn1', value:this.value});
//append this variable inside a div having ID `button_div`
$("#button_div").append($something);
});
<form>
<SELECT NAME="sel" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
Hi i need to pass the selected value immediately on inside of this select tag so pls some one help me
Not that I agree with how you're doing things here (in side the tag), technically it is possible to do what you ask by the following:
<form>
<SELECT NAME="sel" onChange="split(this.value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
You cannot pass the value directly to the handler but you can get the values in it, I'd recommend to do this in code and not use inline event handlers:
var select = document.forms[0].sel;
select.onchange = function(){
var value = select.options[select.selectedIndex].value; // to get Value
var text = select.options[select.selectedIndex].text; // to get Text
}
Here's a working example:
http://jsfiddle.net/c2SrV/
<html>
<head>
<script>
function split(value)
{
alert(value);
}
</script>
</head>
<body>
<form>
<SELECT NAME="sel" onChange="split(value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
<body>
</html>
use "value". hope this was helpful
this.options[this.selectedIndex].value
*assuming you want to put it inline inside the onchange attribute