I'm getting an undefined error in IE11 when I try to execute the following Javascript: alert('obj: ' + document.payment_method.elements['285_id[35]']);
Non array notation form names seem to work fine. Here some test in js fiddle: http://jsfiddle.net/o2d2c16r/2/
<html>
<head>
</head>
<body>
<form name="payment_method">
<select name="285_id[35]">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
<input type="text" name="mytext" value="text entered" />
<select name="myselect">
<option value="a">value a</option>
<option value="b">value b</option>
<option value="c">value c</option>
<option value="d">value d</option>
</select>
</form>
<script>
alert('obj: ' + document.payment_method.elements['285_id[35]']);
alert('obj: ' + document.payment_method.elements['mytext']);
alert('obj: ' + document.payment_method.elements['myselect']);
alert('obj length: ' + document.payment_method.elements['myselect'].length);
</script>
</body>
</html>
Any help would be appreciated!
Thanks,
Gunter
Related
$(document).ready(function () {
$("#block_1").change((e) => {
console.log("block_1 select ", e.target.value);
$("#children_1")
// .find("[value!='" + e.target.value + "']")
.find("option")
.removeAttr("selected");
$("#children_1")
.find("[value='" + e.target.value + "']")
.attr("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/script.js"></script>
</head>
<body style="padding: 50px;">
<select id="block_1">
<option value="">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<div id="children_1" for="1" style="padding: 10px 50px;">
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select>
<option value=""></option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<select>
<option value=""></option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
</div>
<hr />
</body>
</html>
My purpose is to select child select boxes indirectly by selecting a parent select boxes.
But now, it works once for every option, and don't work anymore when I select the same option again.
I hope to fix this, but not sure what was wrong in my code.
Typically, attributes are used for setting the initial value of an element's property, so repeatedly changing an attribute will not always have the intended effect.
Instead, use .prop('selected', true) or .prop('selected', false)
$(document).ready(function () {
$("#block_1").change((e) => {
console.log("block_1 select ", e.target.value);
$("#children_1")
// .find("[value!='" + e.target.value + "']")
.find("option")
.prop("selected", false);
$("#children_1")
.find("[value='" + e.target.value + "']")
.prop("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/script.js"></script>
</head>
<body style="padding: 50px;">
<select id="block_1">
<option value="">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<div id="children_1" for="1" style="padding: 10px 50px;">
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select>
<option value=""></option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<select>
<option value=""></option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
</div>
<hr />
</body>
</html>
I'm trying to create a dynamic dependent drop down lists. This code below work fine with 2 dependency and I’m trying to add a third dependency. Have you got any idea ?
For exemple :
Status 1 = offer 1, offer 2, offer 3 , offer 4
Offer 1 = Option 1
Thanks for your help
UPDATE 11.15.09
Finally find a solution
$("#street").val([]);
$('#street option').hide();
$("#city").on("change", function() {
$('#street option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#street").val([]);
})
$("#number").val([]);
$('#number option').hide();
$("#street").on("change", function() {
$('#number option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#number").val([]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
City:
<select id="city" name="city">
<option value="0">Select City</option>
<option value="1">Manchester</option>
<option value="2">Leicester</option>
<option value="3">Londra</option>
</select>
Street:
<select id="street" name="street">
<option value="1.A">Street A</option>
<option value="1.B">Street B</option>
<option value="1.C">Street C</option>
<option value="2.D">Street D</option>
<option value="2.E">Street E</option>
<option value="2.F">Street F</option>
<option value="3.G">Street G</option>
<option value="3.H">Street H</option>
</select>
Number:
<select id="number" name="number">
<option value="1.A">1</option>
<option value="1.B">2</option>
<option value="1.C">3</option>
<option value="2.D">4</option>
<option value="2.E">5</option>
</select>
I fixed the problem with javascript. (no need to use jQuery)
Please try to use updated code below.
HTML:
<div>
<select name="select1" id="select1">
<option value="1" data-sync="1">Status 1</option>
<option value="2" data-sync="2">Status 2</option>
</select>
</div>
<div>
<select name="select2" id="select2">
<option value="1">offer 1</option>
<option value="1">offer 2</option>
<option value="1">offer 3</option>
<option value="1">offer 4</option>
<option value="1">offer 5</option>
<option value="2">offer 6</option>
<option value="2">offer 7</option>
<option value="2">offer 8</option>
<option value="2">offer 9<option>
</select>
</div>
<div>
<select name="select3" id="select3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="1">option 3</option>
<option value="2">option 4</option>
</select>
</div>
Javascript:
document.getElementById("select1").onchange=function() {
document.getElementById("select2").value=this.options[this.selectedIndex].getAttribute("data-sync");
document.getElementById("select3").value=this.options[this.selectedIndex].getAttribute("data-sync");
}
document.getElementById("select1").onchange();
Check the running code link below.
http://jsfiddle.net/f97u5nLa/33/
I have 2 select boxes. When I select an option on selectbox1, it automatically changes the corresponding value on selectbox2 regardless of value but order.
The thing is, the code is working fine until after a few tries. Then even if I change the option on selectbox1, it doesn't update the one on selectbox2.
To reproduce the issue; go through A to E, then repeat.
Code:
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeAttr('selected');
$(secChildIdx).attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
Also JSFiddle version: https://jsfiddle.net/153w074d/
No need for all that code, just work with selectedIndex:
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$(".secondSelectBox").get(0).selectedIndex = selectedIndex;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
What happened in your original code is that, in some way, the selected attributes are being messed around. Try this: Change to each option from A to E, then start over from A, the selection stops working. Then inspect the second select to see that there are more than one option with selected="selected" attribute. Not sure what caused that tho.
#DontVoteMeDown's answer will certainly work, but the reason you're having this issue is because of the discrepancy between .prop and .attr. Both are similar, but don't refer to the same, identical underlying value.
If you change the below two lines to use the .prop value instead of .attr, your code will work. See the working code example below.
$(".secondSelectBox").find(":selected").removeAttr('selected'); // change to .removeProp
$(secChildIdx).attr("selected", "selected"); // change to .prop
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeProp('selected');
$(secChildIdx).prop("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
You can also use prop to select option.
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$('.secondSelectBox option:eq('+selectedIndex+')').prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
Output is not my ideal thing.I wanna make drill down buttons.
Now output is
index.html is
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">
</head>
<body>
<select data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1" selected>A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
</body>
<script type="text/javascript">
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
</script>
</html>
I wanna make only 2 drill down buttons in index.html .And if I select A in first button,a-1~4 is shown in second button.If I select B in first button,b-1~5 is shown in second button.If I select C in first button,c-1~2 is shown in second button・・・・.
So output now is different form my ideal one.I use Chosen in jQuery plugin. Why can't I do my ideal this? What is wrong? Why can't I filter to second button?
Hope this helps..
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- <script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">-->
</head>
<body>
<select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
<script type="text/javascript">
// $(".chzn-select").chosen();
// $(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(document).ready(function () {
$('#mainDD').on('change', function() {
console.log($(this).val());
console.log($('#mainDD :selected').text()) ;
var thisType = "type" + $(this).val();
for(i=1; i<5; i++) {
var thisId = "type" + i;
console.log(thisType + " " + thisId);
if(thisType !== thisId) {
$("#"+thisId).hide();
}
else {
$("#"+thisId).show();
}
}
})
});
</script>
</body>
</html>
if I have two dropdowns such as:
<select>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>
followed by:
<select>
<option value="option5">option 5</option>
<option value="option8">option 8</option>
<option value="option9">option 9</option>
</select>
how can i make it so that if from the first dropdown someone selects option 2 that only option 9 is available from the second dropdown?
I was told i would need to store the values but am a bit lost on all this?
Thanks for any help.
John
Proof: http://jsfiddle.net/iambriansreed/VLvYA/
Disabled as requested and also auto selects option.
$('#first-select').change(function(){
$('#second-select option').prop('disabled',false);
if(this.value == 'option2')
$('#second-select option:not([value="option9"])')
.prop('disabled',true).parent().val('option9');
});
I am assuming that you want to remove 2nd drop down options based on the option selected index from drop down 1.
EDIT: Removed extra clone that was not required.
DEMO
$(function () {
var $dd2Opt = $('#dd2 option').clone();
var $dd2 = $('#dd2');
$('#dd1').change(function () {
$dd2.empty().append($dd2Opt.slice(this.selectedIndex + 1));
});
});
HTML
<select id="dd1">
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>
<select id="dd2">
<option value="option5">option 5</option>
<option value="option8">option 8</option>
<option value="option9">option 9</option>
</select>
var opts = $('select.second option');
$('select:first').on('change',function() {
if(this.value == 'option2') {
$(this).next('select.second').empty().append(opts[this.selectedIndex + 1]).change();
} else {
$(this).next('select.second').empty().append(opts).change();
}
})
HTML
<select>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>
<select class="second">
<option value="option5">option 5</option>
<option value="option8">option 8</option>
<option value="option9">option 9</option>
</select>
Live Proof
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mainSelect').live('change', function () {
$('#subSelect option').hide();
$('#subSelect option[data-option="' + $(this).val() + '"]').show();
$('#subSelect option:visible:first').attr('selected', true);
});
$('#mainSelect').trigger('change');
});
</script>
</head>
<body>
<select id="mainSelect">
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>
<select id="subSelect">
<option value="option5" data-option="option1">option 5</option>
<option value="option8" data-option="option3">option 8</option>
<option value="option9" data-option="option2">option 9</option>
</select>
</body>
</html>