Select on Change will change another select html javascript or jquery - javascript

I have a select like this
<select name="category" >
<option value="0" selected>Select a Manufacturer</option>
<option value="10">Acer Technologies</option>
<option value="2">Alcatel</option>
<option value="14">Apple Iphone</option>
<option value="4">Azumi</option>
<option value="12">HTC Corporation</option>
<option value="8">Huawei</option>
<option value="5">LG Electronics</option>
<option value="11">Motorola</option>
<option value="9">Nokia Microsoft</option>
<option value="1">Samsung</option>
<option value="6">Sony Ericsson</option>
<option value="3">Zhong Xing ZTE</option>
</select>
And another select HIDDEN like this
<select name="manufacturer" >
<option value="none" selected>Select a Manufacturer</option>
<option value="Acer Technologies">Acer Technologies</option>
<option value="Alcatel">Alcatel</option>
<option value="Apple Iphone">Apple Iphone</option>
<option value="Azumi">Azumi</option>
<option value="HTC Corporation">HTC Corporation</option>
<option value="Huawei">Huawei</option>
<option value="LG Electronics">LG Electronics</option>
<option value="Motorola">Motorola</option>
<option value="Nokia Microsoft">Nokia Microsoft</option>
<option value="Samsung">Samsung</option>
<option value="Sony Ericsson">Sony Ericsson</option>
<option value="Zhong Xing ZTE">Zhong Xing ZTE</option>
</select>
Both selects are almost the same value, the first one is to save the manufacturer as category and the second one is to save the manufacturers name
The first one is visible while the second one is hidden ( display:none )
What I need is:
If the user select in select one for example
<option value="2">Alcatel</option>
In some way the hidden display:none select must be autoselected to
<option value="Alcatel">Alcatel</option>
Any way to do this?
I already have Jquery running other functions on the site
Thanks

Use change function:
$( "select[name='category']" ).change(function(e) {
$( "select[name='manufacturer']" ).val( $(this).find( "option:selected" ).text() );
});
But if option text in category select do not match option value in manufacturer select - code will not work.

Related

The code saves to database not this thing (select option)

HTML code:
<select name="category" onchange="change(this.selectedIndex)">
<option selected disabled hidden>Choose your category</option>
<option value="1">TVs</option>
<option value="2">Laptops</option>
<option value="3">Smartphones</option>
<option value="4">Peripherals</option>
<option value="5">Components</option>
<option value="6">Cameras</option>
</select>
PHP code:
$category = $_POST['category'];
$db->INSERT("INSERT INTO items Values(NULL,'$name','$category','$brand','$nick','$review','$rating')");
I want to save to base by POST my category. For example TVs. And the program saves "value" for example "1". When the value didn't exist it worked, but now I need it to JS function. How to do - name="category" reads option, not value?
So basically what a value is for is to indicate what an input should hold as a content,
so consider doing this
<select name="category" onchange="change(this.selectedIndex)">
<option selected disabled hidden>Choose your category</option>
<option value="TVs">TVs</option>
<option value="Laptops">Laptops</option>
<option value="Smartphones">Smartphones</option>
<option value="Peripherals">Peripherals</option>
<option value="Components">Components</option>
<option value="Cameras">Cameras</option>
</select>
hope it helped!!

How to select the next or before value from the dropdown after the selected one?

I have a drop down which contains the Time with 30 min slide for each hour and I want to select the next option fallowing selected one. ex: the currently selected time is 7:30 PM so when I run my scenario if my current time is equal to the currently selected time then I should change the time to next slot i.e 8:00 PM. so how to write an xpth or jquery to select the nnext option?
Here is the html:
<select id="f-cut-off-time" name="f-cut-off-time" aria-invalid="false" class="valid">
<option value="6:00AM">6:00AM</option>
<option value="6:30AM">6:30AM</option>
<option selected="" disabled="" hidden="" value="7:30PM">7:30PM</option>
<option value="7:30AM">7:30AM</option>
<option value="8:00AM">8:00AM</option>
<option value="8:30AM">8:30AM</option>
<option value="9:00AM">9:00AM</option>
<option value="9:30AM">9:30AM</option>
<option value="10:00AM">10:00AM</option>
<option value="10:30AM">10:30AM</option>
<option value="11:00AM">11:00AM</option>
<option value="11:30AM">11:30AM</option>
<option value="12:00PM">12:00PM</option>
<option value="12:30PM">12:30PM</option>
<option value="1:00PM">1:00PM</option>
<option value="1:30PM">1:30PM</option>
<option value="2:00PM">2:00PM</option>
<option value="2:30PM">2:30PM</option>
<option value="3:00PM">3:00PM</option>
<option value="3:30PM">3:30PM</option>
<option value="4:00PM">4:00PM</option>
<option value="4:30PM">4:30PM</option>
<option value="5:00PM">5:00PM</option>
<option value="5:30PM">5:30PM</option>
<option value="6:00PM">6:00PM</option>
<option value="6:30PM">6:30PM</option>
<option value="7:00PM">7:00PM</option>
<option value="7:30PM">7:30PM</option>
<option value="8:00PM">8:00PM</option>
<option value="8:30PM">8:30PM</option>
<option value="9:00PM">9:00PM</option>
<option value="9:30PM">9:30PM</option>
<option value="10:00PM">10:00PM</option>
<option value="10:30PM">10:30PM</option>
<option value="11:00PM">11:00PM</option>
<option value="11:30PM">11:30PM</option>
<option value="12:00AM">12:00AM</option>
<option value="12:30AM">12:30AM</option>
<option value="1:00AM">1:00AM</option>
<option value="1:30AM">1:30AM</option>
<option value="2:00AM">2:00AM</option>
<option value="2:30AM">2:30AM</option>
<option value="3:00AM">3:00AM</option>
<option value="3:30AM">3:30AM</option>
<option value="4:00AM">4:00AM</option>
<option value="4:30AM">4:30AM</option>
<option value="5:00AM">5:00AM</option>
<option value="5:30AM">5:30AM</option>
</select>
You can retrieve the selected index of the select element, make sure there is another option that comes after it, and then locate it by index in the options collection of that select element.
$('#timeslot').on('input', function () {
var i = this.selectedIndex;
if (i + 1 < this.options.length) {
console.log("next option value is " + this.options[i + 1].value);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='timeslot'>
<option value="6:00AM">6:00AM</option>
<option value="6:30AM">6:30AM</option>
<option value="7:00AM">7:00AM</option>
<option value="7:30AM">7:30AM</option>
</select>
You could just change the value like this.
<option value="6:00PM">5:30PM</option>
That way it will appear as if they are selecting 5:30, but it is outputting 6:00
As I understand you , you need to use :
$('option:selected').next() or
$('option:selected').prev()
To select the next or previous option from the dropdown after or before the selected option you can use the following solution:
Next option:
XPath:
//select[#class='valid' and #id='f-cut-off-time']//option[#selected]//following::option[1]
Browser snapshot:
Previous option:
XPath:
//select[#class='valid' and #id='f-cut-off-time']//option[#selected]//preceding::option[1]
Browser snapshot:

Jquery change multiple select buttons with a select button

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/

Drop down changes automatically ( vise versa would be best )

I need to change the 3rd field automatically depending on first two field. ( it would be best if I change 3rd field and then first 2 fields changes also )
I need a Jquery solution. Anyone can help me please?
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="carcar">car car</option>
<option val="carphone">car phone</option>
<option val="carboll">car boll</option>
<option val="phonecar">phone car</option>
<option val="phonephone">phone phone</option>
<option val="phonecarboll">phone boll</option>
</select>
Is this what you're looking for?
$(document).ready(function() {
// on change for the 3rd select
$("#ChangeItAutomatically").on("change", function() {
// get the value and split on space
var value = $(this).val().split(" ");
// select the other two selects based on the values
$("#First").val(value[0]);
$("#Second").val(value[1]);
});
// on change for the first two selects
$("#First, #Second").on("change", function() {
// set the value of the 3rd select based on the combination of values of the first two
$("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="car car">car car</option>
<option val="car phone">car phone</option>
<option val="car boll">car boll</option>
<option val="phone car">phone car</option>
<option val="phone phone">phone phone</option>
<option val="phone boll">phone boll</option>
</select>

How can I check if Dynamically created Select Boxes have been selected

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);
}

Categories