I am using Ajax in order to display drop-down list when a product group is selected. My Ajax returns a list from the query page(dropd.php). However the problem is the array consists of some empty space between each element. Hence when I did inspect in chrome below is the output I am getting,
<option value="1">Gear pumps</option>
<option></option>
<option value="2">Piston pumps</option>
<option></option>
How could I remove "<option></option>" from the drop-down list? If I take option tag out from html what I receive is;
Gear pumps^piston pumps^vane pumps...etc
If you can notice the space(^).
Ajax code
<script>
$(document).ready(function(){
$('#sel1').on('change', function(){
$.post("dropd.php",{vals:$("#sel1 option:selected").text()},
function(data){$.trim($("#sel2").html( data ));});
});
});
</script>
dropd.php
<?php
require('../config/connection.php');
if($_POST['vals']){
$values = mysqli_real_escape_string($dbc,$_POST['vals']);
$query = "SELECT * FROM prdct_categories WHERE product = '$values'";
$result = mysqli_query($dbc, $query);
?>
<option value="">Select subgroup</option>
<?php
foreach($result as $row)
{ ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['subgroup']; ?><option/>
<?php
}
}
mysqli_close($dbc);
?>
Ajax data goes here
<div class="form-group">
<label for="inputsubprdctgrp" class="col-sm-4 control-label" >Product Subgroup</label>
<div class="col-sm-8">
<select class="form-control" id="sel2" >
</select>
</div>
</div>
Thanks in advance.
There may be 2 issues:
The SQL result gives an empty value which can be fixed by using the array_filter() method:
$new_result = array_filter($result);
You wrote option/ instead of **/option
Hope this helps :)
just dont put those values in options if it is blank..
you can use below code.
$result = mysqli_query($dbc, $query);
?>
<option value="">Select subgroup</option>
<?php
foreach($result as $row)
{
if(trim($row['subgroup'])!=''){
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['subgroup']; ?><option/>
<?php
}
}
mysqli_close($dbc);
?>
Just use `
$('#sel2').find('option:empty').remove();`
after you load content from ajax,
if you want to do it in javascript, otherwise avoid it in PHP in the first place.
I am getting my data from another page to populate an input, but I don't know how to populate a multi-select with that data. Here's my multi select:
<select multiple="multiple" class="multi-select" id="my_multi_select4" name="experience[]">
<?php foreach(WorkModel::Work_List() as $work): ?>
<option value="<?php echo System::escape($work->we_id); ?>"><?php echo System::escape($work->we_name); ?></option>
</select>
To populate it, I need to separate the options with the following data from my JSON:
For example: json_required_name
Many times, there's more than one (would have used a foreach loops, but my page loads before the modal, which grabs the data from another page).
Here is my JSON sample:
{"name":"Gev Offshore","description":"","duration":"1","country":"United Kingdom","employer":"gev offshort","start_date":"2015-08-01","job_start":"2015-08-21","job_end":"2015-08-21","requirements":[{"id":"1","name":"IRATA Level 1 Technician"},{"id":"2","name":"IRATA Level 2 Technician"},{"id":"3","name":"IRATA Level 3 Technician"},{"id":"4","name":"Equipment and Hardware Related"},{"id":"5","name":"NDT Aerospace"},{"id":"6","name":"NDT ECI"},{"id":"7","name":"NDT General"},{"id":"8","name":"NDT MPI"},{"id":"9","name":"NDT Radiography"},{"id":"10","name":"NDT Ultrasonic"},{"id":"11","name":"Rigging"},{"id":"12","name":"Rope Access"},{"id":"13","name":"Rope Access \/ NDT Management"}]}
Is this what you're looking for:
http://jsfiddle.net/1jjps0mv/
Html:
<select multiple="multiple" class="multi-select" id="my_multi_select4" name="experience[]">
</select>
Javascript:
var xreturn = {"name":"Gev Offshore","description":"","duration":"1","country":"United Kingdom","employer":"gev offshort","start_date":"2015-08-01","job_start":"2015-08-21","job_end":"2015-08-21","requirements":[{"id":"1","name":"IRATA Level 1 Technician"},{"id":"2","name":"IRATA Level 2 Technician"},{"id":"3","name":"IRATA Level 3 Technician"},{"id":"4","name":"Equipment and Hardware Related"},{"id":"5","name":"NDT Aerospace"},{"id":"6","name":"NDT ECI"},{"id":"7","name":"NDT General"},{"id":"8","name":"NDT MPI"},{"id":"9","name":"NDT Radiography"},{"id":"10","name":"NDT Ultrasonic"},{"id":"11","name":"Rigging"},{"id":"12","name":"Rope Access"},{"id":"13","name":"Rope Access \/ NDT Management"}]};
$(function() {
$.each(xreturn.requirements, function() {
$('#my_multi_select4').append('<option value="'+this.id+'">'+this.name+'</option>');
});
});
?
does your WorkModel::WorkList() return json or is it returning an associative array? If it is returning the latter, then your code should be mostly correct with the addition of the following:
<select multiple="multiple" class="multi-select" id="my_multi_select4" name="experience[]">
<?php foreach(WorkModel::Work_List() as $work): ?>
<option value="<?php echo System::escape($work->we_id); ?>"><?php echo System::escape($work->we_name); ?></option>
<?php endforeach; ?>
</select>
its necessary that you put the endforeach; block for it to know when to terminate the loop, otherwise it will keep repeating the loop over the select end tag.
now, if the former is true, then you want to first convert your data into an associateive array before performing your loop with json_decode like so:
<select multiple="multiple" class="multi-select" id="my_multi_select4" name="experience[]">
<?php foreach(json_decode(WorkModel::Work_List()) as $work): ?>
<option value="<?php echo System::escape($work->we_id); ?>"><?php echo System::escape($work->we_name); ?></option>
<?php endforeach; ?>
</select>
I have a drop down menu that is populated by an array. The goal is to have each value selected only once in the drop down to prevent duplicate column values.
I found some javascript that will disable each value after its selected, but if you reload the page, nothing is greyed out in the drop down (obviously).
How would I compare the array values with the database to disable values that are already selected in all the rows on load?
$(function(){
$('select').change(function() {
$current=$(this);
$("select").not($current).children(
"option[value='" + $current.val() + "']"
).attr('disabled', "disabled");
});
});
Drop Down Menu
<td>
<div class="grid_content editable">
<span><?php echo $records['equipment']; ?></span>
<select class="gridder_input select"
name="<?php echo encrypt("equipment|".$records['id']); ?>">
<?php
foreach($equipment as $equipments) {
?>
<option value="<?php echo $equipments; ?>"
<?php
if($equipments == $records['equipment']) {
echo 'selected="selected"';
}
?>>
<?php echo $equipments; ?>
</option>
<?php
}
?>
</select>
</div>
</td>
Is there an easier way to do this than what I've suggested? I think the closest solution I've found would work something like
$("select option:contains('Value')").attr("disabled","disabled");
Where value would be replaced with something that checks the DB. Or something like the answer found here using an if else statement
Here is my code;
<select onchange="location = this.options[this.selectedIndex].value;">
<option value="">Select Something</option>
<option value="<?php echo site_url(); ?>">Home</option>
<option value="<?php echo site_url(); ?>publications">Publications</option>
<option value="<?php echo site_url(); ?>contact_us">Contact Us</option>
</select>
When an option is selected, that page will immediately load. However, the drop-down list does not "remember" that that option was selected. The drop-down list will just default back to Select Something. How can I get the list to display what was selected instead?
Before I began using Frameworks I might have tried something like this;
<option value="<?php echo site_url(); ?>contact_us" <?php if($value == "contact_us") {echo "selected"; } ?> >Contact Us</option>
And I would have created a $value using $_REQUEST['value'] or something. But I am using the CodeIgniter framework so I don't think I can do that anymore.
This may help you:
<?php if($value == $_SERVER["REQUEST_URI"]) {echo "selected"; } ?>
I suggest from your code that you have some php $value-es equal to every option value. So, you can compare it with web page URI
More about $_SERVER global
whenever I try change the value from dropdown, it shud redirect to other URL..
anyway, i just had little issue..
when I try to change the value, iam not getting brand value, its showing me as: 'undefined'
Any Idea?
<select id="brand" onchange="gotoPage()">
<?php
$brands = dfr_get_brands_list($category);
foreach ($brands as $brand) : ?>
<option><?php echo $brand; ?></option>
<?php endforeach; ?>
</select>
<?php if (#$_GET['brand']) { ?>
<FONT COLOR="red"><?php echo"[[X] Remove Brand "; ?><?php echo #$_GET['brand']; ?></font>
<?php } ?>
<script>
function gotoPage(){
var url = "http://laptopsisland.com/shop/c/laptops/";
var sel = document.getElementById("brand");
var brand = sel.options[sel.selectedIndex].text;
alert(brand);
window.location.href = url + "&brand=" + brand;
}
</script>
I would chance your options to show something like this
<option value="<?php echo $brand; ?>"><?php echo $brand; ?></option>
and then get the selected value as Bokonic mentioned
sel.options[sel.selectedIndex].value
Let me know how that works.
You don't need to change the generation code.
You also don't need to use getElementById.
<script>
function gotoPage(e) {
var brand = e.options[e.selectedIndex].text;
alert(brand);
}
</script>
<select id="brand" onchange="gotoPage(this)">
<option>aaa</option>
<option>bbb</option>
</select>
Working solution:
http://jsfiddle.net/2YzAV/2/
Version with values:
http://jsfiddle.net/2YzAV/3/