I'm attempting to create a dynamic drop down list, but after searching for hours I'm still completely stumped as to how to do it. So I am experimenting with variables in a list. This is the code I've started with.
<body>
<form method = "post">
<select id = "State" onchange = "a = this.options[selectedIndex].value;">
<option value = ""> Select a state</option>
<option value = "S3"> Pennsylvania</option>
<option value = "S4"> California</option>
<option value = "I4"> Texas</option>
<option value = "I5"> New York</option>
</select>
</form>
</body>
my question is what can I do with the variable 'a' so that I could create a dynamic drop down list based off it? One thing I had hoped to do was use an if-statement to display a second list. I wanted to remain on the same page too.
Note: I apologize if this seems like a basic question, but I've been scouring websites for answers and all I've figured out was that I can't send javascript variables to php, otherwise I'd have gotten this done forever ago
try this way
<select id="appamt" name="appamt">
<? while($amt=mysql_fetch_array($amount)){ ?>
<option value="<?=$amt['amount']?>"><?=$amt['amount']?></option>
<? } ?></select>
When your page detects the onchange event, what you need to do is either have all the combinations of options you want readily available but hidden on the page e.g. $('#sub-option1).hide(); and when the value is selected use $('#sub-option1).show();
Secondly you can have a ajax request that returns a JSON value of key=>value pairs, then use these key value pairs to dynamically build another dropdown using jquery .each() function.
Loop through your json values and add them to a previously hidden selector and then display it.
Hope this helps but if not email me and I will skype you through it.
Jim C
Related
I can't figure out on how to put the selected code after it has selected the option.
I am using laravel, but i dont think it has to do with laravel framework...
<select id="idjenisuniform" name="idjenisuniform" style="width: 100%;">
<option value=""></option>
#foreach($idjenisuniform as $g)
<option value="{{$g->id}}" >{{$g->badanuniform}}</option>
#endforeach
</select>
(the idjenisuniform is from the controller, it works), but I just don't know how to do it after it has done choosing from the option.
Example
it chooses police -> the id is 1
I want to make:
if the option from it is 1, then it will display other option to show what group is he in. For example detective.
In conclusion I am trying to make a select option and after it has choose it, it will proceed to the next select option corresponding to the previous id from option.
please help.
Since you are wanting an effect that depends on user interaction, it would be better to use javascript for the effect you want. With php, the choice has to go all the way back to the web server to get processed, then the result is sent all the way back to the browser and the whole web page will refresh as a result. With javacript, everything happens in the browser.
But, you asked for a php solution, so here's the most simple way.
Say the first select element is named "select-one" and the second select element is named "select-two"
Create two forms. Notice that the second form has an ID.
[form action="/url/" method="whatever"]
[form id="other-form" action="/url/" method="post"]
In the main form (the one without an ID), place all your form elements. In addition, place another hidden element with the same name as the first select element ("select-one");
[form]
[input type="hidden" name="select-one"]
... all other elements
[/form]
Now when you add the first select element, give it a new attribute so that it is associated with "other-form" instead of the main form. Also, give it an ID.
[select id="select1" name="select-one" form="other-form"]
You DO have to add a bit of javascript, but it's not much. If you don't have any other javascript set up, just put this at the bottom of the web page, just above the [/body] tag.
[script]
const select1 = document.querySelector('#select1');
select1.addEventListener('change', (event) => event.target.form.submit());
[/script]
The javascript will submit the form which #select1 is associated with. Since we assigned the element to "other-form", that is the form that will get submitted.
For the php:
I haven't used Laravel in a very verly long time so I'll just give some vanilla php here.
$options_one = ['One', 'Two', 'Three'];
$options_two = [
'One' => ['Foo', 'Bar', 'Baz'],
'Two' => ['Boom', 'Bang', 'Bam'],
'Three' => ['Fee', 'Fie', 'Fo', 'Fum']
];
$select_one = (isset ($_POST['select-one']) ? $_POST['select_one'] : false;
// do some input validation
Now for the forms:
<form id="other-form" method="post" action = ""></form>
<form id="main-form" action="">
<input type="hidden" name="select-one" value="<?php echo $select_one ?>">
<!-- This element is assigned to "other-form" -->
<select form="other-form" name="select-one" id="select1">
<option value="">Select One...</option>
<?php foreach($options_one as $option) {
$option = ($select_one === $option) ? "<option selected>$option</option>" : "<option>$option</option>";
echo $option;
}?>
</select>
<select name="select-two">
<?php
$options = ["The first choice has not been selected"];
if (array_key_exists($select_one, $options_two)) {
$options = $options_two[$select_one];
}
foreach ($options as $option) {
echo "<option>$option</option>";
}
?>
</select>
<!-- other inputs in your form -->
</form>
To begin with, I am an absolute beginner in front-end development, thus please excuse me if the question is too elementary.
The project I am working on, a drop-down list has been defined as:
<div ng-controller="FacetController">
<div class="spnlocationdrop-container" ng-hide="isservicelocal">
<select class="spnlocationdrop" ng-model="$parent.locationsearch" ng-options="location for location in locations | sortArray ">
<option value="">All Cities</option>
</select>
</div>
</div>
The list contains cities, out-of which the user has to select one. The value has to be stored, and sent to the backend via an AJAX call.
How do I get the selected value? Until now, I've been doing that using the document.getElementByID().value() function, but since the above list contains no ID, how do I get the value?
ng-model will have the value of the option selected.
Here's a simple working example: Plunker
In my example, data.singleSelect has the value you need so I'm able to output that to the view using {{ data.singleSelect }} though if I wanted to access it in my controller I would do var input = $scope.data.singleSelect and then pass that input variable to the backend via an AJAX call.
I am relatively new to Spring MVC and Dojo/Dijit widgets and I am stuck with a problem. I need to unblock a particular div based on the option selected from the dropdown i.e. when the user selects the reason as "Unexperienced" I am supposed to unblock a div with id = "unexpUser" style="display:none;" to collect some additional information.
JSP -
<select data-dojo-type="dijit.form.Select" name="userReason" id = "reason">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</select>
JC -
<script>
if(dijit.byId('reason').value == "opt1"){
unexpUser.style.display = 'block';
}
</script>
When the page loads, the option displayed on the dropdown is "Experienced". When I change the option to "Not experienced" , I need to unblock the div but this particular code doesn't seem to be the right code for comparing. Please help.
.value is not the right way to get value from a dijit widget instead use:
dijit.byId('reason').get("value")
Use onchange listener :
dijit.byId('reason').on("change",function(evt){
alert(evt); //(evt == value of option )
// your code here
});
okay I got my mistake. This is the solution. #Harpreet Singh your solution works perfectly with this code.
JSP-
<form:select data-dojo-type="dijit.form.Select" path "" name="userReason" id = "reason" onchange="myFunction1();">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</form:select>
and in my JS I created a function for the String comparison.
JS -
<script>
function myFunction1(){
if(dijit.byId('reason').get("value") == "opt1"){
unexpUser.style.display = 'block';
}
</script>
this works. Thank you so much for your help!
I have a select element as shown below.I am passing the value of the selected option to a PHP page as a variable with javascript as shown below :
<script>
var area1=document.getElementById("area").value;
$("#list").load("selectcity.php?city1="+city1+"&area1="+area1);
<script>
<select id="areas" name="areas">
<option value="Queens Town">Queens Town</option>
<option value="QueensTown">QueensTown</option>
</select>
Now the thing is , In the PHP page I am able to echo $_GET['area1']; when QueensTown is selected but whenever I am trying to pass Queens Town ,its now working.Can anybody help.
You have to escape the values properly, otherwise you would end up with a URL like this:
selectcity.php?city1=xyz&area1=Queens Town
Which is unlikely to work the way you want. Use this instead:
var data = {
city1: city1,
area1: $('#areas').val()
};
$('#list').load('selectcity.php?' + $.param(data));
See also: jQuery.param()
I have a html form
Inside of this form in select option i have called one java script function like
<form>
<SELECT NAME="sel" onChange="split('1')">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
function split(str)
{
var str=str+str;
return str;
}
Now i need to get these return value on inside of the form for example in another select
<SELECT NAME="sel123" >
<OPTION VALUE="str">Milk</option>
</SELECT>
can anyone help me?
HTML can't do anything with variables. It isn't a programming language.
You aren't very specific about what you want to do, but it will probably involve writing JS to perform DOM manipulation.
You can have a place where you can display the value. For example.
function split(str)
{
var str=str+str;
$('classoridofelementhere').html(str);
}
EDIT
Here is an example on how to move option from one list to another: http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/
Remember to download and put a reference to jQuery library.