how to display values in dropdown - javascript

enter image description hereI am trying to display values in a multi-select dropdown, those values are coming from an API. below I have given JSON format in which data is received from API.
the below data is that the user already selected values, now I am displaying a popup to edit the selected values, before this, I need to show the user that the user is previously selected in the multi-select dropdown.
//below is my values coming from API
[
{id: 1, name: "selected 1"},
{id: 2, name: "selected 2"}
]
// below is my dropdown element
<select id="selected" name="selected[]" multiple>
<option value="" > </option>
</select>

If you are using PHP, I think you can do like this.
<select name="selected[]" id="selected" multiple>
<option selected="selected">Choose one</option>
<?php
foreach($users as $user) {
?>
<option value="<?php echo $user['id'] ?>"><?php echo $user['name'] ?></option>
<?php
}
?>
</select>

Well, as per my understanding from your question, you would like to show all those values which the user selected before. If I'm right, then we may have 2 solutions. 1) To keep the track at server end(i.e in the database) 2) To keep track at the client side (i.e in cookies on a temporary basis),
Please let me know if I answered your question. If don't then please elaborate your question in more detail with the reference code snippet.

Related

form values not passing through action url in php

I have a simple form made in PHP, I am trying to pass the select value in the page mentioned in the action URL,
<form action="filtertable.php" method="post">
<select class="form-select" name="filtercategory" aria-label="Default select example"
onchange="this.form.submit()">
<option selected>Select Category</option>
<option value="<?php echo $roww["c_id"]; ?>"><?php echo $roww["cname"]; ?></option>
</select>
</form>
when the user selects on any select box it will go to the page filtertable.php, and from there am trying to get the selected value like this:
<?php
$filtercategory=$_POST['filtercategory'];
However it doesn't work, can anyone please tell me what is wrong in here, thanks in advance

On dropdown list select , update PHP variable to be used in SQL query

I have a select statement and I have two dropdown lists :
$s= "SELECT area FROM $local ORDER BY area ASC";
$r = mysqli_query($con,$s);
<select name="country">
<option value="Ireland">Ireland</option>
<option value="UK">United Kingdom</option>
</select>
echo '<select name="location" id="location">';
while($row = mysqli_fetch_assoc($r)){
echo '<option value="'.$row['area'].'">'.$row['area'].'</option>';
}
echo "</select>";// Closing of list box
Now the goal is once the user selects UK or Ireland that the other drop down list will display all areas in the database that relate to the country.
Ive seen many similar problems solved by using onchange however I dont have any real experience with jQuery,Ajax or Javascript. I want the $local variable to change once the dropdown list option has been selected.

Display related data from database based on dropdown selection JavaScript

In my task I want to select one name from drop down. Then I want to print the technology related to that name in other div tag. I don't know how to do this. I successfully get data from data base for dropdown option. Here is my code.
candidate name:
<select name="candidate_id" class="form-control" id="can_name" value="<?php echo set_value('candidate_id');?>"palceholder="candidate full name" required>
<option></option>
<?php foreach ($candidate as $r): ?>
<option value="<?php echo $r->candidate_id; ?>"><?php echo $r->candidate_name." "; ?></option>
<?php endforeach; ?>
</select>
</select>
<div class="error"><?php echo form_error("candidate_name");?></div><br>
<div></div><br> <!-- here I want to print technology related to canididate name -->
let's use the jQuery library, as this will simplify the syntax of what you want to do considerably.
You include it in your page like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This will pull in the most recent minified version of the 1.x branch of the library.
Then you need a select. I was about to say, let's use below ex.
Let's use a select anyway, you can change it if it isn't correct:
<label for="meetingPlace">Meeting place: </label>
<select id="meetingPlace">
<option>Please select</option>
<option>Buckingham Palace</option>
<option>The White House</option>
<option>Mount Everest</option>
</select>
With that in place you need to hook into the select's on change event.
you can do this in your JavaScript:
$("#meetingPlace").on("change", function(){
// This code will fire every time the user selects something
})
All this does is select the element with an id of "#meetingPlace" and declare an anonymous function which should be run every time the user selects something different.
As a final step for this post, let's have the JS output what the user selected to the page.
Create a div with an id of "results":
<div id="results"></div>
Then within the onchange callback add the following code:
var selected = $(this).val();
$("#results").html("You selected: " + selected);
What this does is assign the value of the selected option element to a variable, then set the innerHTML of the results accordingly.

Setting HTML drop down list option

I am trying to set value from php the option selected in a drop down list in html.
can anyone tell me how to give the "selected" attribute as the answer is generated dynamically
<select form="onsite_assessment" class="form-control" id="onsite_assessment">
<option value="no">NO</option>
<option value="yes">YES</option>
</select>
In the above code if the user has selected No in the previous session. i want to display that option by default.
This is just some general code which can be shaped for your needs. As I can't see all your code I cannot give a FULL answer. Basically you need to store the users' choice and retrieve this in a variable whenever needed, either string or Boolean (true/false). In the example I will show this using a string.
<?php
$user_choice = 'yes';
?>
<select form="onsite_assessment" class="form-control" id="onside_assessment">
<option value="no" <?php if($user_choice == 'no'){echo 'selected'; }>NO</option>
<option value="yes" <?php if($user_choice == 'yes'){echo 'selected'; }>YES</option>
</select>

Bootstrap Multiselect: On submit getting length of selected options list instead of option values

This is my first time using Bootstrap Muliselect; it's been a completely elegant experience until this:
When my form is submitted, what comes through the POST request is the number of selected options from each select.multiselect element, not their values, ie:
If I create:
<select name='foo'>
with 3 options
<option value='b' selected='selected'>B</option>
<option value='a' selected='selected'>A</option>
<option value='r' selected='selected'>R</option>
subsequently typing print_r($_POST) produces:
Array
(
[foo] => 3
)
I feel like this must be a facepalm sort of moment, but I've been at it for about two hours and though I can write ways to achieving this end, I can only assume Bootstrap is supposed to have such functionality by default. Anyone able to point me in the right direction, here?
Notes:
For sure dependencies are installed & jQuery is loaded properly
I'm using CakePHP & Foundation 4, but I don't think there are any conflicts/collisions
I'm submitting the form via $("#MahFormNaym").submit(); which I think doesn't matter but I am a JavaScript nub
The PHP/HTML:
<select id="<?php echo $model;?>-filter" class="multiselect" multiple="multiple">
<?php foreach($elements as $id => $element):?>
<option value="<?php echo $id;?>"> <?php echo $element;?> </option>
<?php endforeach;?>
</select>
The JavaScript:
$(".multiselect").multiselect({
buttonWidth:"600px",
includeSelectAllOption: true,
enableFiltering:true
});
You haven't assigned your option a corresponding value to reflect [foo] => 3. So, in order for this object to work like what you wanted, you need to assign the value with number like this:
<option value='0' selected='selected'>B</option>
<option value='1' selected='selected'>A</option>
<option value='2' selected='selected'>R</option>
Once node finds the specific number that matches to value, it'll then grab the content of the selected.

Categories

Resources