I am trying to get the title attribute from a selected Option in a Select menu. I have spent over a day on this and I am seeking help. I found a couple of ways to use the value attribute but now I need to use the title attribute somewhere else on the page.
Here is my current attempt although I have been through many iterations. I have listed two possible scripts although only one will eventually be used. The first possible script might include Jquery and if it does and it can be used here, can you translate it into Javascript, as I am not good at either? Do I have the elements in the correct order?
<select id="amount_id" onclick="function()">
<option value="" disabled="disabled">Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
$(document).ready(function(){
$(document).on('click','#amount_id',function(){
var result = $("option:selected",this).attr('title');
$("#displayTitle").text(result);
});
});
</script>
OR
<script>
function run(){
document.getElementById("displayTitle").value =
document.getElementById("amount_id").value;}
</script>
Thank you.
Here is a JavaScript alternative of the first code :
<select id="amount_id">
<!-- removed onclick -->
<option value="" disabled>Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
document.getElementById("amount_id").addEventListener('change',function(){
var eTitle = this.options[this.selectedIndex].getAttribute('title');
document.getElementById("displayTitle").value = eTitle;
});
</script>
Related
I want to use “selected” in option attribute in name attribute using Javascript or jQuery. It means I want to use name="1" option as selected one when the page is loaded. I tried with the below code. But it not workes.
Code:
<select id="countryselect" name="country">
<option value="1" name="0">Afghanistan</option>
<option value="2" name="0">Albania</option>
<option value="3" name="0">Algeria</option>
<option value="4" name="1">Malaysia</option>
<option value="5" name="0">Maldives</option>
</select>
Jquery:
$("#countryselect").$('option[name="1"]')
Demo: http://jsfiddle.net/muthkum/zYRkC/
Thank you.
You can pass a second parameter to the selector to define the scope
$('#countryselect').val($('option[name="1"]', "#countryselect").val());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="countryselect" name="country">
<option value="1">Afghanistan</option>
<option value="2" name="1">Albania</option>
<option value="3">Algeria</option>
<option value="4">Malaysia</option>
<option value="5">Maldives</option>
</select>
Just put this line of code in your script-tag and it will work like you want.
$('#countryselect option[name="1"]').attr('selected',true);
If you want to go with dynamic assignment, you can go with
$("#countryselect").val(1) .
If selection of option is static and only want for initial load, then selected can be used for this like
<option value="4" selected>Malaysia</option>
You can try it out here
Please click on the link to see the code code pen link here
<select id="countryselect" name="country">
<option value="1" name="0">Afghanistan</option>
<option value="2" name="0">Albania</option>
<option value="3" name="0">Algeria</option>
<option value="4" name="1">Malaysia</option>
<option value="5" name="0">Maldives</option>
</select>
you ca use the selector to set the "selected" attribute like this:-
$("#countryselect option[name='1']").attr('selected', 'selected');
var nameVal = $('[name=1]').attr('value');
$("#countryselect").val(nameVal)
Codepen
You can try something like this
$("#countryselect option[value='3']").attr("selected","selected");
and if you want to select by name value then use
$("#countryselect option[name='0']").attr("selected","selected");
It will set the selected attribute on that option.
I need help on something really simple.
I have 2 dropdown boxes on a form:
<select name="OfficeLocation" >
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
The second one is "Read Only"
All I need to know is how can I change the value of "OfficePhone" by changing the value of "OfficeLocation"? using either a simple JavaScript or JSP Command
Thanks
You are able to use a script like the following:
<script>
menu1 = document.getElementsByName('OfficeLocation')[0];
menu2 = document.getElementsByName('OfficePhone')[0];
menu1.onchange = function(){
menu2.value = menu1.value;
}
</script>
Here you are using the onchange event to initiate a function that make the value on the second menu menu2 equals to the selected value of the first menu menu1.
An online demo is here
Notice that: the script should be placed after your elements.
You gonna need an event handler function for the OfficeLocation select and an id for the second select.
<select name="OfficeLocation" onchange="eHandler">
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone" id="oPhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
You have to implement your event handler in your script, like this:
function eHandler(){
var secondSelect = document.getElementById('oPhone');
secondSelect.value = //the value you want to be selected
}
I'm trying this for a while now, searched everywhere here and on other sites.
I found some sort of a solution here http://jsfiddle.net/zszqs/
but when I try it on my code, on my actual page, it just doesn't work. It does in the example website tho, if I change all the code to mine.
<input name="documenttype" type="radio" required id="dType1" value="Pro-Forma">Pro-Forma
<input name="documenttype" type="radio" required id="dType2" value="Invoice">Invoice
<select name="paymentmethod" required id="paymentmethod">
<option value="" default selected>Select...</option>
<option value="TT">Online Bank Transfer</option>
<option value="PP">PayPal</option>
<option value="CC">Credit Card</option>
</select>
basically I want to remove the Credit Card option when the radio Pro-Forma option is selected, or bring it back again if user changes radio to Invoice...
<script>
var option = '<option value="CC">Credit Card</option>';
$('input[name=documenttype]').change(function() {
var $select = $("#paymentmethod");
if (this.id == 'dType1') {
$select.find("option[value='CC']").remove()
} else if (!$select.find("option[value='CC']").length) {
$select.append(option)
}
})
</script>
I feel like I'm not charging the code on page load, or something like this.
I'm totally new to jquery so I may have missed like, I don't know, where to put the <script> (head or body?) or if I have to specify some onLoad option.
script code with jquery
$(document).ready(function ()
{
$(".documenttype").click(function ()
{
$("option[value='CC']").css("display", $('#dType1').is(":checked") ? "none" : "block");
});
});
HTML Code
<input class="documenttype" name="documenttype" type="radio" required id="dType1" value="Pro-Forma">Pro-Forma
<input class="documenttype" name="documenttype" type="radio" required id="dType2" value="Invoice">Invoice**
<select name="paymentmethod" required id="paymentmethod">
<option value="" default selected>Select...</option>
<option value="TT">Online Bank Transfer</option>
<option value="PP">PayPal</option>
<option value="CC">Credit Card</option>
</select>
Using JavaScript, how can I:
set a default value (and disable it) on the textbox
disable the <select> option "Days"
? This is my HTML:
Deliver every <input type="text" maxlength="2" size="3">
<select>
<option value="Days">Days</option>
<option value="Weeks">Weeks</option>
</select>
I hope this one would work.
<input type="text" id="defaultDays" size="3">
<select id="disableOption">
<option value="Days">Days</option>
<option value="Weeks">Weeks</option>
</select>
<script type="text/javascript">
document.getElementById('defaultDays').setAttribute('value','28');
document.getElementById('defaultDays').disabled = true;
document.getElementById('disableOption').disabled = true;
</script>
Thank you guys for your previous comments.
I have 2 drop downs, I would like to know whether there is a possibility to display and hide some of the options in second drop down based on value selected in first dropdown.
<script language="JavaScript">
function funchk(){
document.getElementById('z').style.display="block";
}
</script>
<select name="first" onchange="funchk();">
<option name="asw" value="a">sda</option>
<option name="sd" value="sd">ZZ</option>
<option name="rdf" value="afe">fe</option>
<option name="bfe" value="bfe">fe3</option>
</select> <?php echo "<br/>" ?>
<select name="second">
<option name="a" value="a">aa</option>
<option name="z" value="a" style="display:none">ZZ</option>
<option name="r" value="a" style="display:none">aa</option>
<option name="b" value="b">bb</option>
</select>
Here i would like to display the 'z' option in 2nd dropdown to be displayed when onchging value of first dropdown.
No, you can't rely on setting the CSS to show/hide <option> elements.
You'll need to remove them, or just simply disable/enable them.
function funchk() {
document.getElementsByName('z')[0].disabled = false;
}
<select name="second">
<option name="a" value="a">aa</option>
<option name="z" value="a" disabled="disabled">ZZ</option>
<option name="r" value="a" disabled="disabled">aa</option>
<option name="b" value="b">bb</option>
</select>
you have to do that with javascript
here you can find different examples how to do that.
http://www.satya-weblog.com/2008/08/javascript-remove-delete-select-option.html
http://www.plus2net.com/javascript_tutorial/list-remove.php
Make use of Document Object Model(DOM) along with Javascript Events to manipulate HTML nodes.