How can I get this to work and look right.
<?php $arr = (array) json_decode($item->options, true); ?>
<label>Please choose a variant</label><br />
<select name="options">
<option>{{ implode(' ', $arr) }}</option>
</select>
But it's showing in one option instead of 3 in this case example.
It is difficult to say without seeing your json, but you need to loop through the array of options:
<select name="options">
<?php foreach($arr as $a):?>
<option>{{{a}}}</option>
<?php endforeach;?>
</select>
Related
The following form works exactly as expected, and provides a dropdown list to select an option from:
<select id="f-heroes" class="c-form-select__dropdown">
<option value="" disabled selected>Heroes</option>
<option value="captainAmerica">Captain America</option>
<option value="ironMan">Iron Man</option>
<option value="blackWidow">Black Widow</option>
<option value="thor">Thor</option>
</select>
What I am trying to do is this:
<select id="f-heroes" class="c-form-select__dropdown">
<option value=""><?echo getElement('hero');?></option>
</select>
This gets the 'hero' list but displays it below and out of the option window, and leaves me no option to select a value.
I may be missing something really simple here, but can't seem to get this to work, any help much appreciated.
It looks like your mixing PHP and JavaScript here. From my understanding of your question, you're wanting to create a loop that keeps creating 's for each of your superheroes.
If that's correct, you could use PHP and do something like the below:
<select id="f-heroes" class="c-form-select__dropdown">
<option value="" disabled selected>Heroes</option>
<?php
$superHeroes = array('Captain America','Iron Man','Black Widow','Thor');
$i = 0;
while ($i < count($superHeroes)) {
$name = $superHeroes[$i];
echo "<option value='".$name."'>".$name."</option>";
$i++;
}?>
</select>
I need to create a web page where the user has to select from a dropdown list a value for different categories as shown below.
<div class ="SurveyFormContainer">
<label for ="cat1">category 1</label>
<select>
<option value=0>1</option>
<option value=1>2</option>
<option value=2>3</option>
<option value=3>4</option>
<option value=4>5</option>
</select>
<br>
<label for ="cat2">category 2</label>
<select>
<option value=0>1</option>
<option value=1>2</option>
<option value=2>3</option>
<option value=3>4</option>
<option value=4>5</option>
</select>
</div>
I need to add a lot of different categories, so my question is: is there a way to reuse the same set of options without having to replicate the code each time?
I'm quite new with html, I've tried to search for solutions online but could not find anything... thanks for the help!
You're not able to do this with HTML alone, you will need another piece of technology to help you do this.
There are many ways to achieve this, such as using a server-side programming language (C#, PHP, JavaScript) or on the front-end using JavaScript.
If you opt for a server-side approach then you can assign the common options to a variable and perform a for(each) loop for the select boxes that share those values.
For example, in PHP:
<?php
$sharedOptions = [
0 => 1,
1 => 2,
2 => 3,
3 => 4,
4 => 5
];
?>
<!DOCTYPE html>
<html>
<body>
<div class="SurveyFormContainer">
<label for="cat1">Cat 1</label>
<select id="cat1" name="cat1">
<?php foreach($sharedOptions as $key => $value) { ?>
<option value="<?php echo $key ?>">
<?php echo $value ?>
</option>
<?php } ?>
<option>Only for Cat 1</option>
</select>
<label for="cat2">Cat 2</label>
<select id="cat2" name="cat2">
<?php foreach($sharedOptions as $key => $value) { ?>
<option value="<?php echo $key ?>">
<?php echo $value ?>
</option>
<?php } ?>
<option value="50">Only for Cat 2</option>
</select>
</div>
</body>
</html>
You can use JavaScript (or Jquery) to assign a series of Html to a group of elements.
$(document).ready(function(){
var items={option1:{value:1,text:1},option2:{value:2,text:2}}
//You may narrows the selector to an exact class e.g. $(".mySelect") instead of $("select")
$.each(items, function (i, item) {
$('select').append($('<option>', {
value: item.value,
text : item.text
}));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Selection 1:
<select name="select1" class="mySelect"></select>
<br><br>
Selection 2:
<select name="select2" class="mySelect"></select>
<br><br>
Besides do not forget to set name for <select> if there are multiple selects.
While I am sure I am doing something stupid, after staring at the code for much too long, I am now stumped. I have created a select box and populate it with posts from a certain post type in Wordpress. This works fine except when viewing the source, the option value is being placed outside of the actual value attribute and all boxes are being marked as selected.
It has to be a simple mistake somewhere but if anyone can spot this, it would be greatly appreciated.
<label for="meta-select-providers" class="package-row-title"><?php _e( 'Provider', 'package_textdomain' )?></label>
<select name="meta-select-providers" id="meta-select-providers">
<?
if( $providers->have_posts() )
{
while( $providers->have_posts() )
{
$providers->the_post();
$provider_name = get_the_title();
$provider_id = the_ID();
?>
<option value="<? echo $provider_id; ?>" <?php if (isset ($package_stored_meta['meta-select-providers'])) selected( $package_stored_meta['meta-select-providers'][0], $provider_id ); ?>>
<?php _e( $provider_name, 'package_textdomain' )?></option>
<?
}
}
?>
</select>
Update
<option value="<? the_ID(); ?>" <?php if (isset ($package_stored_meta['meta-select-providers'])) selected( $package_stored_meta['meta-select-providers'][0], the_ID() ); ?>>
<?php _e( $provider_name, 'package_textdomain' )?></option>
Source:
1647
<option value="" selected>
Post 1</option>
1645
<option value="" selected>
Post 2</option>
1643
<option value="" selected>
Post 3</option>
the_ID() displays (echoes) the value. From the docs:
Displays the numeric ID of the current post. This tag must be within The Loop.
Note: This function displays the ID of the post, to return the ID use get_the_ID().
This code will work as expected:
<label for="meta-select-providers" class="package-row-title"><?php _e( 'Provider', 'package_textdomain' )?></label>
<select name="meta-select-providers" id="meta-select-providers">
<?
if( $providers->have_posts() )
{
while( $providers->have_posts() )
{
$providers->the_post();
$provider_name = get_the_title();
$provider_id = get_the_ID();
?>
<option value="<? echo $provider_id; ?>" <?php if (isset ($package_stored_meta['meta-select-providers'])) selected( $package_stored_meta['meta-select-providers'][0], $provider_id ); ?>>
<?php _e( $provider_name, 'package_textdomain' )?></option>
<?
}
}
?>
</select>
I have a form setup and the data goes into a mysql database. There are several parts where the choice is both a numerical and a written rating - 1 - poor, 2 - fair, 3 - good, 4 - excellent. The field in the database is set to varchar with a length of 20. However, the output only returns the written portion - poor, fair, good, excellent, dropping the numerical. I want to either include the numerical with the written or just use the numerical itself. Can someone explain how I would set this up.
I am assuming the changes I need to make are in the php form itself - I am supplying a sample of the code and what I think I need to change - just want to verify before I do so.
<select name="programRating" class="pure-input-1">
<option value="">Select Rating...</option>
<option value="Poor" <?php if($_POST['programRating'] == "Poor") echo "selected"; ?>>1 - Poor</option>
<option value="Fair" <?php if($_POST['programRating'] == "Fair") echo "selected"; ?>>2 - Fair</option>
<option value="Good" <?php if($_POST['programRating'] == "Good") echo "selected"; ?>>3 - Good</option>
<option value="Excellent" <?php if($_POST['programRating'] == "Excellent") echo "selected"; ?>>4 - Excellent</option>
</select>
<select name="programRating" class="pure-input-1">
<option value="">Select Rating...</option>
<option value="Poor" <?php if($_POST['programRating'] == "1-Poor") echo "selected"; ?>>1 - Poor</option>
<option value="Fair" <?php if($_POST['programRating'] == "2-Fair") echo "selected"; ?>>2 - Fair</option>
<option value="Good" <?php if($_POST['programRating'] == "3-Good") echo "selected"; ?>>3 - Good</option>
<option value="Excellent" <?php if($_POST['programRating'] == "4-Excellent") echo "selected"; ?>>4 - Excellent</option>
</select>
The values which are stored in your database are the ones you specify in the "value" attribute of each "option".
So put the numbers in the "value" attribute instead of the text.
I have a drop down list that displays values from a database and I would like to colour code the values in the drop down. I have managed to do this just fine in browsers on a windows machine but I can't change the colours displayed on a mac. Is there a way round this?
<select id="advice_asked" class="dropdown" name="advice_asked">
<option value="">Please Select</option>
<?while($row = mysqli_fetch_assoc($result)){
if($row['responded'] == 0){
$colour = '#63BDFD';
}else if(($row['response_userID'] == $row['question_userID'])&&($row['response_responded'] == 0)){
$colour = '#F68634';
}?>
<option style="color:<? echo $colour; ?>" value="<? echo $row['questionID']; ?>">
<? echo $row['questionDesc']; ?> ( Created: <? echo date('d-m-Y', strtotime($row['dateAsked'])); ?>)
</option>';
<? } ?>
</select>
The dropdown class is
.dropdown{
-webkit-appearance:none;
}
This has removed most of the styling of the drop down but not the colour.
Any help will be greatly appreciated
There is some plugins like Select2 or Uniform that can help you styling <select>