I have a HTML element like so:
<select>
<option id="a" hidden"1">Abcdefgh</option
</select>
And, using javascript, I want to retreive the hidden value from the option element.
How do I do this?
var hiddenVal = document.getElementById( "a" ).hidden; // this doesnt work
Not all attributes map directly to properties. You should be able to use the native .getAttribute() to get the value of custom attributes.
var hiddenVal = document.getElementById( "a" ).getAttribute('hidden');
<select>
<option id="a" hidden="1">Abcdefgh</option>
</select>
Well first off your mark up on your HTMl is all off. You are missing an end tag on the element and you would need to put hidden="1" with the equals and quotes. But is hidden even a valid attribute for an option element?? I dont think it is.
Related
This should be a easy question but I can't get through it, so I need your help.
I have four option tag in my select structure and each tag has a value and id and content like this:-
<select id='0'>
ABC
<option id='123' value='X'>ABC</option>
<option id='456' value='Y'>DEF</option>
</select>
My question is, how can I change the content of the option Tag by it's id later? I can't select the specific option tag with it's value because I can only get the id with a series of complicated functions.
To be more clear:- I have the id of a option tag and I need to change the content, "ABC", "DEF", the value is used for other things and I can't select the option tag with the value.
Thank you all!
It should works perfectly!!
$('select #id').text('ABC');
$('select option#id').text('ABC');
jquery has different approach for change the content of option only as said as text(). Then remaining all html tags can use html() for change content.
Then i have selected the option which has specific_id by $('select option#specific_id')
$(function(){
$('select option[id="123"]').text('xyz');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='0'>
<option id='123' value='X'>ABC</option>
<option id='456' value='Y'>DEF</option>
</select>
just like this:
// Imagine you have optionId as variable
var optionId = '456';
// Get related option element
var relatedOption = $('#select option[id=' + optionId + ']');
// Change its value and its text
relatedOption.val(relatedOption.attr('value')).text(relatedOption.attr('value'))
On my page there are a few <select> html elements, each of them with multiple <option> values. I would like the same <select> elements to be used in a MapBox description toolkit, which expects me to pass a HTML source into its setHTML method.
The simple way I do it now is:
var tableOption = document.getElementById(selectId);
var html = tableOption.innerHTML;
return "<select>" + html + "</select>";
This works, however it has a drawback of passing the original html source, therefore it does not reflect which option is selected right now. I know I can get currently selected option with value or selectedIndex, and it should be possible to parse the HTML I have obtained and remove and add selected property to a corresponding node in JS, however this seems a bit complicated.
Is there some easier way how to get a HTML source which could be used to construct a copy of a select element with the exact selection state it has now?
I would prefer a solution without jQuery if possible.
You could just wrap your select in another element. Then you'd be able to select it by id, get the parent node, then the parent node's innerHTML. If you want to show which option is currently selected, you can place the selected attribute on it.
document.getElementById('selectId').addEventListener('change', function() {
var opts = this.getElementsByTagName('option');
for (var i = 0; i < opts.length; i++)
opts[i].removeAttribute('selected');
this.querySelector('option:checked').setAttribute('selected', 'selected');
console.log(this.parentNode.innerHTML);
});
<div class="select-wrapper">
<select id="selectId">
<option>Yes</option>
<option>No</option>
</select>
</div>
Just clone the element and then set the selectedIndex - things like event handlers probably wouldn't be copied though
I realize you asked for a simpler solution but I can't think of one much simpler considering it's only 4 lines
Fiddle https://jsfiddle.net/s8mb0mxp/2/
HTML
<select id="original">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<button>
Clone
</button>
<div id="target">
</div>
JS
$('button').on('click', function(){
var $original = $('#original');
var el = $original.clone(); // Clone the object
$('#target').append(el) // Attach the new object to an element
el.find('option')[$original[0].selectedIndex].setAttribute('selected', 'selected')
console.log(el[0].outerHTML)
});
Is it possible to use jquery to get an html5 data attribute from a select option?
<select id="change-image">
<option value="cool" data-image="myimage.jpg">Cool</option>
</select>
$("#pet-tag-id").change(function() {
var src = $("#change-image").data("image");
$("#image-preview").attr("src", src);
});
<img id="image-preview">
Yes.
You even did it in the correct manner. jQuery will pull HTML5 data attributes into its internal expando data object for elements. So you can access them just by name.
The only thing that is incorrect is, that you don't call .data() on the correct element. You're calling it on the <select>, but you need to grab the selected option element. Like
var src = $("#change-image option:selected").data("image");
$("#change-image").change(function() {
var data_image = $(this).children('option:selected').attr('data-image');
});
I want to be able to choose the Battery 9 inside the dropdownlist.
I want the image of Battery 9 to show in the img tag.
Am I doing something wrong?
HEAD
function checkBatteryLife(){
if(document.getElementById('batterylifes').value == 'batterylife9'){
document.getElementsByTagName('batteryID').src = 'battery9.png';
}
BODY
<img alt="" src="" name="batteryID" onclick="checkBatteryLife()">
</br>
<select id="batterylifes" onchange="checkBatteryLife()">
<option name="batteryIMG" value="batterylife9">Battery 9</option>
</select>
The getElementsByTagName method will return a collection of tags by name, such as IMG or SELECT. Passing in the name attribute of a tag will not yield any results.
You should probably use getElementById and pass in the id of the element:
function checkBatteryLife() {
if(document.getElementById('batterylifes').value == 'batterylife9')
{
document.getElementsById('batteryID').src = 'battery9.png';
}
}
..
<img alt="" src="" id="batteryID" onclick="checkBatteryLife()" />
<br />
<select id="batterylifes" onchange="checkBatteryLife()">
<option name="batteryIMG" value="batterylife9">Battery 9</option>
</select>
You can also use getElementsByName which will return a collection of DOM elements with the specified name property, and then iterate through it to find the correct one.
You need .getElementsByName() function instead of .getElementByTagName():
document.getElementsByName('batteryID')[0].src = 'battery9.png';
As .getElementsByName() function returns list,and not a single element, for accessing list's element you need to use [] square brackets.Specifically you need first matched element with name="batteryID", that's why you should use[0].
Firstly, it is not cross-browser compatible to get the value of the selected option by simply reading the value of the select. Instead, first detect the selected option then read ITS value.
var sel = document.getElementById('batterylifes');
if (sel.options[sel.options.selectedIndex].value == 'batterylife9') {
//your code here...
}
Secondly, as many have pointed out, you are mistakenly using getElementsByTagName to reference a single element by its name. You need getElementsByName(), though this is not cross-browser compatible either. Other options:
use jQuery or some other library
if you don't care about old browsers, use the new document.querySelector() method to select the element via CSS syntax
give the image an ID and use getElementById()
is it possible to "override/overwrite" an input element fixed value using javascript and/or jquery?
i.e. if i have an input element like this:
<div id="myDiv">
<input type="text" name="inputs" value="someValue" />
</div>
is it possible to make a jquery object of that element and then change its value to something else then rewrite the jquery object to the dom??
I'm trying but obviously I haven't got good results!
I've been trying something like this:
$('input').val("someOtherDynamicValue");
var x = $('input');
$("#myDiv").html(x);
If you just want to manipulate the value of the input element, use the first line of your code. However it will change the value of every input element on the page, so be more specific using the name or the id of the element.
$('input[name=inputs]').val("someOtherDynamicValue");
Or if the element had an id
$('#someId').val('some Value');
Check out jQuery's selectors (http://api.jquery.com/category/selectors/) to see how to get whatever element you need to manipulate with jQuery.
You can directly access the value via the $.val() method:
$("[name='inputs']").val("Foo"); // sets value to foo
Without needing to re-insert it into the DOM. Note the specificity of my selector [name='inputs'] which is necessary to modify only one input element on the page. If you use your selector input, it will modify all input elements on the page.
Online Demo: http://jsbin.com/imuzo3/edit
//Changes on the load of form
$(document).ready(function(){
$('#yourTxtBoxID').val('newvalue');
});
//Changes on clicking a button
$(document).ready(function(){
$('#somebuttonID').click(function(){
$('#yourTxtBoxID').val('newvalue');
});
});