logo
down
shadow

Change select box options upon selecting option in first select box


Change select box options upon selecting option in first select box

By : DisplayName=
Date : November 20 2020, 03:01 PM
To fix this issue Your first select values are written in lower case, but your if tests are testing for capitals.
Second, the append() method is not standard and you should be using .appendChild() instead. But, with either one, you can't append strings. For strings, you must set the .innerHTML property.
code :
 var option = document.create("option");
 option.value = "something";
<!DOCTYPE html>
    <html>
    <head>
    	<title>selectbox</title>
    	<style>   
    	div.event {
    		padding-left: 40%;
    		padding-top: 5%;
    	}
    
    	#mySelect{
    		width: 60px;
    		height: 50px;
    		text-align: center;
    	}
    </style>
    </head>
    <body>
    <form name="myForm">
    	<div class="event">
    		<select id="mySelect" multiple size="3">
    			<option value="name" disabled="disabled">Name</option>
    			<option value="animals">Animals</option>
    			<option value="flowers">Flowers</option>
    		</select>
    
    		<select id="mySelect2" multiple size="4">
    			<option disabled="disabled">Images</option>
    		</select>
    	</div>
    </form>
    
    <script>
    
      // Get a reference to the first drop down:
      var selectbox1 = document.getElementById('mySelect');
      
      // Set up the event handling for the first select:
      selectbox1.addEventListener("change", myFunction);
    
    	var selectbox2 = document.getElementById('mySelect2');
    
    	function myFunction() {
    		if (document.getElementById('mySelect').value == "animals"){
    			selectbox2.innerHTML = '<option disabled="disabled">Images</option><option>Tiger</option><option>Lion</option><option>Bear</option>';
    		} 
    
    		else if (document.getElementById('mySelect').value == "flowers"){
    			selectbox2.innerHTML = '<option disabled="disabled">Images</option><option>Rose</option><option>Lotus</option><option>Lily</option>';
    		}
    	}
    
    </script>
    
    </body>
    </html>


Share : facebook icon twitter icon
Javascript/PHP/MySQL Change <select> options depending on the selected option of another <select> element

Javascript/PHP/MySQL Change <select> options depending on the selected option of another <select> element


By : user135995
Date : March 29 2020, 07:55 AM
may help you . There are a number of ways to do this, and which way is best depends a bit on your capabilities.
The best way, as others have said, is to setup some Ajax functionality to contact a separate php script and supply it with the value for the first dropdown, from which it will return the list that should be put into the second dropdown. The javascript/ajax code on the original page would then do the actual processing to load the data that the script supplied into the dropdown.
make protractor wait for the select element to get populated with options on selecting a option in another Select elemen

make protractor wait for the select element to get populated with options on selecting a option in another Select elemen


By : Antonio Amorim
Date : March 29 2020, 07:55 AM
will be helpful for those in need Try adding a browser.wait call. This would wait until there's at least one option in the selectSchoolElement:
code :
browser.wait(function() {
  return selectSchoolElement.all(by.tagName('option')).count().then(function(count) {
    return count > 0;
  });
}, 5000);
3 select elements that change options based on the selected option in the first and second select

3 select elements that change options based on the selected option in the first and second select


By : Kasithangam
Date : March 29 2020, 07:55 AM
I hope this helps you . When you are passing the value to the next drop down you are passing the index from dropdown 1 to dropdown 2, from dropdown 2 to dropdown 3 you're passing the value.
drop down one you select first option The value passed to the second drop down is 1. The value you select drop down two is 1 The value you pass is test1
code :
$("#item1").change(function() {
    var value = $(this).val();
    $("#item2").html(options[value]);
});

$("#item2").change(function() {
    var value = $(this).val();
    $("#item3").html(options[value]);
});


var options = [
    "<option value='0'>item1: test 1</option><option value='1'>item1: test 2</option>",
    "<option value='0'>item2: test 1</option><option value='1'>item2: test 2</option>",
    "<option value='0'>item3: test 1</option><option value='1'>item3: test 2</option>"
];
Would it be possible to change the select option value when selecting corresponding select option with Jquery?

Would it be possible to change the select option value when selecting corresponding select option with Jquery?


By : krithika kadaba
Date : March 29 2020, 07:55 AM
like below fixes the issue I would like to know if it would be possible to change the select option value when selecting another select option - I know it sounds odd, but please see the code below: , The following code should work
code :
<label for="item">Item:</lable>
<select name="item" id="select-1">
    <option value="Ball">Ball</option>
    <option value="Door">Door</option>
    <option value="Pen">Pen</option>
    <option value="Apple">Apple</option>
</select>

<label for="img">Image:</lable>
<select name="img" id="select-2">
    <option value="ball.png"><img src="ball.png"></option>
    <option value="door.png"><img src="door.png"></option>
    <option value="pen.png"><img src="pen.png"></option>
    <option value="apple.png"><img src="apple.png"></option>
</select>

<label for="item">Image Animation:</lable>
<select name="animation" id="select-2">
    <option value="ball.gif"><img src="ball.gif"></option>
    <option value="door.gif"><img src="door.gif"></option>
    <option value="pen.gif"><img src="pen.gif"></option>
    <option value="apple.gif"><img src="apple.gif"></option>
</select>
<script>

   $("#select-1").on("change", function() {
      var value = $(this).val();
      $("#select-2").val(value.toLowerCase()+".png");
      $("#select-3").val(value.toLowerCase()+".gif");
   });
</script>
how to change value of select options based on another select option selected?

how to change value of select options based on another select option selected?


By : Sidharam Anache
Date : March 29 2020, 07:55 AM
may help you . I am not sure the title is explained perfectly. , Successfully Done...
Ajax function =>
code :
$(document).ready(function () {
    $('#location').on('change', function () {
        var location_id = $(this).val();

        if (location_id == '') {
            $('#fees').prop('disabled', true);
        } else {
            $('#fees').prop('disabled', false);
            $.ajax({
                url: "<?php echo $base_url;?>welcome/getFeePeriod",
                type: 'POST',
                data: {location: location_id},
                dataType: 'json',
                success: function (data) {
                    //alert("Ok");
                    $('#fees').html(data);
                },
                error: function () {
                    alert("Error Accured...");
                }
            });
        }
    });
});
public function getFeePeriod()
{
    $location_id = $this->input->post('location');
    $FeesPeriod = $this->admin_model->getFeePeriod($location_id);
    if (count($FeesPeriod)>0) {
        $fee_select_box = '';
        $fee_select_box .= '<option id="">Select Fee Period</option>';
        foreach ($FeesPeriod as $fees) {
        $fee_select_box .= '<option id="' . $fees->admission_fee_1 . '">Monthly</option>+
                            <option id="' . $fees->admission_fee_3 . '">Quarterly</option>+
                            <option id="' . $fees->admission_fee_6 . '">Half Yearly</option>+
                            <option id="' . $fees->admission_fee_12 . '">Yearly</option>';
        }
        echo json_encode($fee_select_box);
    }
}
function getFeePeriod($location_id){
    $query = $this->db->get_where('location', array('id'=>$location_id));
    return $query->result();
}
Related Posts Related Posts :
  • How to get text from selected value in a dropdownlist which is js based
  • window is not defined angular universal third library
  • Angularjs ng-repeat stylization depending on previous value
  • Trying to implement Fittext.js
  • Calculate number of match in array Lodash
  • Jquery Smooth Scroll Using Offset.top
  • How to extract data to React state from CSV file using Papa Parse?
  • How to add unique links to google maps markers
  • How to use if condition in a tool bar in java script
  • Ajax filter in django not showing in HTML
  • data collection with Javascript
  • Rotate image on lightbox2 load
  • Prevent body from scrolling when a Pop-Up is open
  • How to copy files that do not need to be compiled in Gulp?
  • Array not assigned to variable? How does this work and what exactly is it doing?
  • Sorting associative array of objects in javascript
  • Changing Icon in Sap.m.tree having CustomTreeItem
  • Merge two array of objects based on a key
  • javascript in css not working
  • Passing only clicked element to onClick function - reactjs
  • React boilerplate doesn't load js files in the index.html
  • is Child service inside child component visible in the Parent component?
  • Check if data attribute value equals a string
  • How to get value of child tag of a button tag
  • How to access subjects of selected mails in Apple Mail using JavaScript?
  • How to get all dynamically set inline-style CSS in jQuery?
  • Error: Module "html" does not provide a view engine (Express)
  • Random Image in <Div> from array
  • Slider with touch function
  • ReactJS Component Architecture Problems / Nested Components or Single Component Manager
  • Javascript: Caching within Closure doesn't work
  • HTM5 Canvas Drawing App: How Do I Select The Color?
  • Assigning Events using HTML DOM
  • html5 getUserMedia() portrait mode
  • How to avoid 'headers already sent' within Promise chain?
  • Get a result from a react native app integrated into an existing android app
  • Why does the value of input field return undefined
  • How to get return object in jquery uploadFile method
  • Javascript string with arguments to single quotes
  • Understanding JS functions syntax (applies to other languages as well, I'm sure)
  • AngularJS Single Page App: Reference Error, ____ is not defined
  • whatwg-fetch new typescript 2.5.3
  • React.js - Array.unshift() not updating array on front-end
  • JavaScript localeCompare don't sort well [ "aaa-1.0", "aaa-1.1", "aaa-1.01", "aaa-11&
  • Mongoose handle validation error in a promise call and Express middleware
  • Building tree array of objects from flat array of objects
  • How to add a progress bar to file upload using javascript and ajax call?
  • JavaScript: is it permitted to override a standard built-in object?
  • Change the current page of an AJAX datatables
  • Array element is undefined even after pushing elements into it
  • onmousemove event not working
  • Chrome-Extension/JavaScript How to make all links on page have no effect?
  • Websocket issue Internet Explorer
  • sessionStorage value becomes null in other tab in AngularJS
  • Split URL from position x to the end in Javascript
  • How to set value of input field with NgIf in Angular 4
  • invalidStateError for second time screenshare on Chrome
  • How do you pass a value to the variable in a xhr.setRequestHeader?
  • I cant start nodemon on my windows 10
  • Nested if else jumps out from the main if else in javascript
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org