Have any chance to remove exp. value="1" option select?
Exp. that is my option select:
<select name="animals">
<option value="0">dog</option>
<option value="1">cat</option>
</select>
How to remove value="0" and value="1"?
I try this, that is my form:
<form method="post" action="/user/register/" onsubmit="test(this)">
<select name="animals" id="animals">
<option value="0">dog</option>
<option value="1">cat</option>
</select>
</form>
That is my test function:
function test(form) {
form["#animals"].removeAttr("value");
}
But have error message:
form['#animals'] is undefined
Using jQuery:
$('option').removeAttr("value");
Remove an option :
$("select option[value='0'], select option[value='1']").remove();
Try:
$('select[name="animals"] option[value="1"]').remove();
Two problems exist with your function
form["#animals"] is not the correct way to retrieve a element from a form.
Use form["animals"] - use the name directly with no css selector
form["animals"] is not a jQuery object so the removeAttr will fail.
Use $(form["animals"])
Instead just use $(form["animals"]).find('option').removeAttr('value')
Update:
//this will remove the attributes at load time
$(function() {
$('#animals option').find('option').removeAttr('value');
});
Related
onchange I want to get the select option custom attribute and set to the other input's value. Somehow I cannot get the course_price in the input onchange of the select. It only shows the first option value in the input only.
function selectFunction(e) {
var value1 = $("#test").data('typeid'); //to get value
document.getElementById("money").value = value1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" onchange="selectFunction(event)">
<option id="test" data-typeid="<?php echo $row1['course_price']?>"
value="<?php echo $row1['course_id']?>"><?php echo $row1['course_name']?>
</option>
</select>
<input type="number" value="" id="money" class="form-control">
The issue is because the data-typeid attribute is on the selected option, not the select, so your jQuery code is looking at the wrong element. You can fix this by using find() and :selected to get the chosen option before reading the data attribute from it.
Also note that on* attributes are very outdated. You should be using unobtrusive event handlers, something like this:
$(function() {
$('select.form-control').change(function() {
var typeId = $(this).find('option:selected').data('typeid');
$("#money").val(typeId);
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option data-typeid="1111" value="courseId1">courseName1</option>
<option data-typeid="2222" value="courseId2">courseName2</option>
</select>
<input type="number" value="" id="money" class="form-control">
In your question you are using #test which is id for all options and so it will always consider first occurance of id test. So do not use same id multiple times on the same DOM, change it to class="test" if you need it, otherwise, you need to target the selected option, and it will not need any id or class. Check here:
var type_id = $('select option:selected').attr('data-typeid');
and assign the variable to input box:
document.getElementById("money").value =type_id;
So the entire updated function will be like this:
function selectFunction(e) {
var type_id = $('select option:selected').attr('data-typeid'); //to get value
document.getElementById("money").value =type_id;
}
Another way to make it:
$(document).on('change', 'select.form-control', function() {
var r = $('select.form-control option[value="'+$(this).val()+'"]').attr("data-typeid")
$("#money").val(r)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option selected disabled>-- Select one --</option>
<option data-typeid="1111" value="courseId1">courseName1</option>
<option data-typeid="2222" value="courseId2">courseName2</option>
</select>
<input type="number" value="" id="money" class="form-control">
I want to check in javascript whether a checkbox in bootstrap-multiselect has been checked. Usually checkboxes are created using the label and the type="checkbox" attribute. In that case I can use
document.getElementById(id).checked
to test whether the checkbox is checked or not. But in bootstrap-multiselect, the label is used.
Here is my html code:
<select class="demo" multiple="multiple">
<option id="test_id" value="test_value">test_value</option>
</select>
If I use the function document.getElementById(id).checked, I get an "undefined" instead of true or false?
What is the correct way to test for a checked or unchecked box in this case?
thanks
carl
Just push all the selected values into an array and manipulate the info as needed.
HTML
<select class="demo" multiple="multiple" >
<option id="test_id1" value="test_value1">test_value1</option>
<option id="test_id2" value="test_value2">test_value2</option>
<option id="test_id3" value="test_value3">test_value3</option>
<option id="test_id4" value="test_value4">test_value4</option>
</select>
<div id='selectedVals'></div>
jQuery
$(".demo").change(function() {
var allSelected = new Array();
$(".demo option:selected").each(function(){
allSelected.push(this.value);
});
$('#selectedVals').html(allSelected)
});
https://jsfiddle.net/wa4mjmaj/
Here's a function that returns whether a specific option is checked using its id:
function isChecked(optionId) {
return $(".demo > #" + optionId).get(0).selected;
}
Here's a fiddle using JQuery. I assume you're using JQuery if you're using Bootstrap. Those are select options you have, not checkboxes, btw ;)
https://jsfiddle.net/d1L8uott/
Code:
<select class="demo" multiple="multiple" id="mySelect">
<option id="test_id1" value="test_value">test_value1</option>
<option id="test_id2" value="test_value">test_value2</option>
<option id="test_id3" value="test_value">test_value3</option>
</select>
$('#mySelect').change(function(){
alert($('#mySelect option:selected').text());
});
I am a beginner in java-script , what I am doing right here is trying to make my combo-box named "dale" to enable and disable when i select "Reasons Specific Categorized" from my combo-box named "repSelect" but i keep getting an error on my java-script.
function makeEnable(value){
if(value=="rep4"){
var x=document.getElementById("dale")
x.disabled=false
}else{
var x=document.getElementById("dale")
x.disabled=true
}
}
</script>
</script>
<select onChange="makeEnable(value)" name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte" >
</form>
My modification But dosent work
function makeEnable(){
var e = document.getElementById("repSelect");
var strUser = e.options[e.selectedIndex].value;
if(strUser=="rep4"){
document.getElementById("dale").disabled=false;
}else{
document.getElementById("dale").disabled=true;
}
}
You are using the .getElementById() method, but your element doesn't have an id defined. Add an id in the html:
<select id="dale" name="dale">
You may also need to modify the call to your function in the first select's onchange handler, to pass this.value instead of just value:
<select onChange="makeEnable(this.value)" name="repSelect">
You can also substantially simplify your function as follows:
function makeEnable(value){
document.getElementById("dale").disabled = value!="rep4";
}
Demo: http://jsfiddle.net/3t16p5p9/
EDIT: I just noticed that you had the jquery tag on your question. To use jQuery, remove the inline onChange= attribute and then add this to your script:
$(document).ready(function() {
$("select[name=repSelect]").change(function() {
$("#dale").prop("disabled", this.value!="rep4");
}).change();
});
This binds a change handler to the first select, and then calls it immediately so that the second one will be appropriately enabled or disabled when the page loads (as requested in a comment).
Demo: http://jsfiddle.net/3t16p5p9/2/
Actually you are using document.getElementById but your combobox doesn't have an Id.
Thats the reason its not working.
Instead of adding onchange in the html, use as below:
<select id='repselect' onchange=makeEnable() name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select id="seldale" name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte"/>
$('#repselect').change(function(){
if(this.value=="rep4"){
var x= document.getElementById("seldale")
x.disabled=false
}else{
var x =document.getElementById("seldale")
x.disabled=true
}
});
I'd like to add and remove options from one drop down menu using JQuery given a selected option in another.
HTML:
<form action='quickLook.py' method = 'post'>
First DropDown Menu
Specify Channel:
<select id='bolometer'>
<option selected id='Dual' value = 'Dual' >Dual
<option id='Top' value = 'Top' >Top
<option id='Bottom' value = 'Bottom' >Bottom
</select>
Second DropDown Menu
<br>Specify Data to Display:
<select id='target'>
<option selected id='Spectrum' value = 'Spectrum'>Spectrum
<option id='Interferogram' value = 'Interferogram'>Interferogram
<option id='SNR' value = 'SNR'>SNR
<option id='Diff_Band' value = 'Diff_Band'> Diff_Band
</select>
<input type='submit' value= 'Query Images'>
</form>
I'd like to do something like this is JQuery:
$("#Dual").click(function() {
$("#target").append("#Diff_Band");
$("#target").remove("#Interferogram");
$("#target").remove("#SNR");
});
$("#Top").click(function() {
$("#target").append("#Interferogram");
$("#target").append("#SNR");
$("#Diff_Band").remove();
});
I want to append or remove the already written html.
What is the best way to do this?
Thank you for your time!
This is a similar problem I've encountered before working with Safari. A solution is to use .detach() instead of remove() as it keeps all jQuery data associated with the removed elements. Check this jsfiddle: http://jsfiddle.net/Ueu62/
If I have this code:
<select onchange="alert('?');" name="myname" class="myclass">
<option isred="-1" value="hi">click</option>
</select>
How can I get the value '-1' from the custom attribute isred ?
I don't want to use the value property.
And I dont want to target the option tag by a name or id.
I want something like onchange="alert(this.getselectedoptionID.getAttribute('isred'));"
Can anyone help?
Also I don't want to use jquery.
You need to figure out what the selectedIndex is, then getAttribute from that options[] Array.
<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass">
<option isred="-1" value="hi">click</option>
<option isred="-5" value="hi">click</option>
</select>
jsFiddle DEMO
As a side note:
Don't use inline javascript in your HTML. You want to separate your business logic from your UI. Create a javascript event handlers instead to handle this. (jQuery / Angular / etc)
in jquery, you can just write:
$("#myname").find(':selected').attr('isred');
Use something like this:
document.getElementById("x").onchange = function () {
console.log(this.options[this.selectedIndex].getAttribute("isred"));
};
//Pure Javascript solution, and elegant one check if you really want to leverage the power of javascript.
// Listening to a onchange event by ID attached with the select tag.
document.getElementById("name_your_id").onchange = function(event) {
//event.target.selectedOptions[0] have that option. as this is single selection by dropdown. this will always be 0th index :)
let get_val = event.target.selectedOptions[0].getAttribute("isred");
console.log("Value from the Attribute: ", get_val)
}
<select id="name_your_id" name="myname" class="myclass">
<option isred="423423" value="hi">One</option>
<option isred="-1" value="hi">Two</option>
</select>
Assuming we have a HTML markup as below:
<form id="frm_">
<select name="Veh">
<option value='-1' selected='selected'>Select</option>
<option value='0' ren='x'>xxx</option>
<option value='1' ren='y'>yyy</option>
</select>
</form>
The attr "ren" can be accessed like this:
function getRep() {
var ren = document.forms['frm_'].elements['Veh'].options[document.forms['frm_']
.elements['Veh'].selectedIndex].getAttribute('ren');
console.log("Val of ren " + ren); //x or y
}
Demo
You use: .getAttribute('isred')
You want:
<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass">
<option isred="-1" value="hi">click</option>
<option isred="-1" value="ho">click</option>
</select>
you can
$(".myclass").val(function(){alert($("option",this).attr("isred"));})