I have problem in removing the attribute selected in the option
my select is inside the modal when my page load option build dynamically like this
<select class="form-control" id="petselect" name="petselect">
<?php
foreach ($pest as $pet){
echo "<option value='".$pet->id."'>$pet->name</option>";
}
?>
</select>
when I edit the form the modal will show and I selected the default pet->id
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
Now when I change it to pet5 and submit the form via ajax, and my modal will hide,
when I edit again the option selected pet5 is displayed but when I view source
this is how it looks like, 2 selected attribute.
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5" selected="selected">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
this is my js to add selected attribute,when I edit the form
$('#petselect option')
.filter(function() { return $(this).val() === petID; })
.attr('selected',true);
and code for my modal when it hides.
$('#petselectmodal').on('hidden.bs.modal', function () {
$('#petselect option:selected')
.removeAttr('selected');
});
This should not be done on the <option> but on the <select> level. The Options are basically a visual indicators. The element that has the Name and thus the Value is the Select element. Use $('#petselect").val(5); and then the form will read this value instead. Plus HTML will update the Option too.
$(function() {
$("button").click(function() {
$("#petselect").val(5);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
<button>Change</button>
You can do it manually if you so choose.
$(function() {
$("button").click(function() {
$("#petselect").val("");
$("#petselect option").prop("selected", false);
$("#petselect").val(5);
$("#petselect option[value='" + 5 + "']").prop("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
<button>Change</button>
Related
I have 3 dropdowns in a form:
<select id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<select id="2" required>
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select id="3" required>
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
I need the second and third dropdown to appear/disappear based on selection of the first dropdown. 2 and 3 have to be hidden on page load, or when value 3 is selected on dropdown 1, but not just hidden from view, rather completely non-existant. I say this because jquery .show and .hide only makes an element disappear from display, it still stays inside the code and because of the "required" attribute inside those hidden dropdowns, form cannot submit.
I have tried this as well as many other answers I found, but had no luck...
<script>
$("#1").change(function () {
if ($(this).val() == '1') {
$('#2').show();
$('#3').hide();
} else if ($(this).val() == '2') {
$('#3').show();
$('#2').hide();
} else {
$("#2").hide();
$('#3').hide();
}
})
</script>
Please help...
Edit:
Something along those lines:
<form id="form">
<select id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<div id="here">
<select id="2" required>
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select id="3" required>
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
</div>
</form>
$("#1").change(function () {
if ($(this).val() == '1') {
$('#2').appendTo( "#here" );
$('#3').remove();
} else if ($(this).val() == '2') {
$('#3').appendTo( "#here" );
$('#2').remove();
} else {
$('#2').remove();
$('#3').remove();
}
})
I am not very good at jquery. This does what I want, but only once. I dont know how to bring them back once removed. For example, if I selected from #1: 1(Car) and from #2: 1(Small Car), #3 will be removed. But if i now decide to choose another option on #1 nothing happens. Also, on load, all 3 are shown, I wanted to keep #2 and #3 hidden until an option on #1 is selected.
Here's one way to go about it. Instead of using numbers as ID's, why not use a data-attribute. Each time a select option is chosen the code will show the next one in the sequence.
$(document).ready(() => {
$('select[data-order=1]').show()
let selects = $('select[data-order]');
selects.change(function() {
// get number
let num = +$(this).data('order');
// show the next select and hide all selects after that
selects.each(function(i,o) {
let thisNum = +$(o).data('order');
if (thisNum === num + 1) $(o).show().val(''); // show and reset the value
else if (thisNum > num + 1) $(o).hide();
})
})
})
select[data-order] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<select data-order='1' id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<select data-order='2' id="2">
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select data-order='3' id="3">
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
</form>
I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/
On the basis of selection of Issue type i want to show 2nd drop down. if someone is select Board i want to show 2nd drop down and if someone select Branding i want to show different option. pls help
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>
In your select
<select name="issue_type" id="issue_type" onchange="change('issue_type');">
In your js file
$(document).ready(function(){
function change(id) {
//check condition if as
if ($('#' + id).val() == 'Board') {
//hide select except your required select
//like
$("#send_to").show().siblings().hide();
} else if () { // your next condition
//so on
}
}
});
here's jquery
$(document).ready(function(){
function changeVisibleSelect(elem){
var vis = $(elem).val() == 'Board';
$('#send_to' + (vis ? '_board' : '')).removeClass('hidden');
$('#send_to' + (vis ? '' : '_board')).addClass('hidden');
}
$('#issue_type').change(function(){
changeVisibleSelect(this);
});
changeVisibleSelect($('#issue_type'));
});
and minor edit to your html
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to_board">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>
i changed the id of second select
css:
.hidden{display:none}
here's working jsfiddle: http://jsfiddle.net/MXjmY/1/
I have some code that has one contact select box hard coded and then if you click on a add button it adds more contacts. Each contact can be selected from a dropdown and give a location in at location text box.
I want on submit to be able to know if they have selected someone and if not I want to clear out the Location box as there cannot be a location if there is no contact.
<!--- The myContactCount variable is set in another part of javascript this is the current count plus one of the number of current select boxes. --->
<script type="text/javascript" language="javascript">
var e='';
var contactSelectedValue='';
for(var i=1;1<myContactCount;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}
</script>
<!--- the ID will be 1-100 depending on how many contacts they have added --->
<select name="myContactID_#ID#">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
So after they are created dynamically they code would look like this.
<select name="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select name="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select name="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
Your script has couple of issues:-
1<myContactCount instead of i<=myContactCount and you are using name in the select and
trying to fetch it by id.
Demo
Html
<select id="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select id="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select id="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
JS
var e='';
var contactSelectedValue='';
for(var i=1;i<=3;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}
Is it possible for each dropdown options to link somewhere when selected without the need for an external button?
<select>
<option value="x">x</option>
<option value="y">y</option>
</select>
You can use the onChange property. Something like:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
Add an onchange event handler and set the pages location to the value
<select id="foo">
<option value="">Pick a site</option>
<option value="http://www.google.com">x</option>
<option value="http://www.yahoo.com">y</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
... or if you want / need to keep your option 'value' as it was, just add a new attribute:
<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>
<script>
document.getElementById('my_selection').onchange = function() {
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>
Maybe this will help:
<select onchange="location = this.value;">
<option value="home.html">Home</option>
<option value="contact.html">Contact</option>
<option value="about.html">About</option>
</select>
This is an old question, I know but for 2019 peeps:
Like above if you just want to change the URL you can do this:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
But if you want it to act like an a tag and so you can do "./page", "#bottom" or "?a=567" use window.location.replace()
<select onChange="window.location.redirect(this.value)">
<option value="..">back</option>
<option value="./list">list</option>
<option value="#bottom">bottom</option>
</select>
Extending on #kevin's answer,
if someone has to perform some confirmation logic if URL is critical.
<select onChange=" this.options[this.selectedIndex].text == 'Delete' ? "Confirmation logic" : window.location.href=this.value;" >
<option selected disabled>Action</option>
<option value="/user/view">View</option>
<option value="/user/edit">Edit</option>
<option value="/user/delete">Delete</option>
</select>
You can use this code:
<select id="menu" name="links" size="1" onchange="window.location.href=this.value;">
<option value="URL">Book</option>
<option value="URL">Pen</option>
<option value="URL">Read</option>
<option value="URL">Apple</option>
</select>