can we make slider in select options? - html

can we make slider/carousel in select options.below is the code and image.anyone help plz.
<select class="" id="project_type" name="project_type" title="Project Type" multiple
style="width: 410px;">
<option value="Residential" <?php if($selected_project_type == 'Residential') echo "selected";
?> >Residential</option>
<option value="Commercial" <?php if($selected_project_type == 'Commercial') echo "selected"; ?
> >Commercial</option>
<option value="Residential & Commercial" <?php if($selected_project_type == 'Residential &
Commercial') echo "selected"; ?> >Residential & Commercial</option>
<option value="Infrastructure" <?php if($selected_project_type == 'Infrastructure') echo
"selected"; ?> >Infrastructure</option>
<option value="Others" <?php if($selected_project_type == 'Others') echo "selected"; ?>
>Others</option>
enter image description here
i want all select options inline and put slider.

Selects are pretty hard to customize
A way easier will be just make slider
and change an input or even div properties when click on slide

Related

Option Value placed outside of quotes

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>

Change Database Output

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.

How to change colour of option value in a drop down list

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>

html select list selected item and maximum value can be selected

HELLO,
i have an html select list, and i want: the selected number to be a given value $content->number, and the maximum value to be $content->product_type->stock_2 if it is less than 5, or 5 if it is greater than 5.
now i have:
<select class="number" name="number">
<? $max = $content->product_type->stock_2 > 5 ? 5 : $content->product_type->sale_stock; ?>
<option value="<?= $content->number ?>"><?= $content->number; ?> </option>
<? for ($i = 1; $i <= $max; $i++):?>
<option <?php if($content->product_type->stock_2 == $i) echo 'selected="selected"' ;?> value="<?= $i ?>"><?= $i; ?></option>
<? endfor; ?>
</select>
but it shows me twice the selected value $content->number. i'm sure i am mistaking somewhere.
Any suggestions?
thank you!
I do not know whether I correct understood what you want to do, but try this:
<select class="number" name="number">
<? $max = $content->product_type->stock_2 > 5 ? 5 : $content->product_type->sale_stock; ?>
<option value="<?= $content->number ?>"><?= $content->number; ?> </option>
<? for ($i = 1; $i <= $max; $i++):?>
<? if ($i != $content->number): ?>
<option <?php if($content->product_type->stock_2 == $i) echo 'selected="selected"' ;?> value="<?= $i ?>"><?= $i; ?></option>
<? endif; ?>
<? endfor; ?>
</select>

Set current date in form select lists

Basically I have HTML form which reads in a date from a user, for a hotel booking system.
I have 3 lists, one for day, one for month and one for year.
<SELECT NAME="month">
<OPTION VALUE="1"> Jan
<OPTION VALUE="2"> Feb
<OPTION VALUE="3"> March and so on
</SELECT>
and the same for year(2010 - 2013) and day(1 -31).
Is there any way I can have the default value in the day list set to the current day, the default value in the month list set the the current month, and the default value in the year list set to the current year? Rather than manually having to do it.
Thanks in advance for the help!
You will need to use JavaScript. Here's an example, using jQuery:
<script type="text/javascript">
$(document).ready(function(){
var CurrentDate=new Date();
$("#year").val(CurrentDate.getYear());
$("#month").val(CurrentDate.getMonth());
$("#day").val(CurrentDate.getDate());
});
</script>
Here's the code in action.
You will have to use javascript. or any client side scripting to do this. I can suggest you some examples but you must first understand the concept of client side scripting
In response to #sushil bharwani you can also use a server side language if you are comfortable with that. PHP is installed on most web hosts you find now days and a plus (as opposed to javascript) is that it is guaranteed to work. The clients user agent does not matter.
This is php code:
<?php
$month = date('F');
if($month == "January") { $jan = "selected"; }
if($month == "February") { $feb = "selected"; }
if($month == "March") { $mar = "selected"; }
if($month == "April") { $apr = "selected"; }
if($month == "May") { $may = "selected"; }
if($month == "June") { $june = "selected"; }
if($month == "July") { $july = "selected"; }
if($month == "August") { $aug = "selected"; }
if($month == "September") { $sep = "selected"; }
if($month == "Octomber") { $oct = "selected"; }
if($month == "November") { $nov = "selected"; }
if($month == "December") { $dec = "selected"; }
?>
Now select below code, then copy and paste between the body-tag:
<select name="start_month" id="start_month">
<option value="January" <?php echo $jan; ?> >January</option>
<option value="February" <?php echo $feb; ?> >February</option>
<option value="March" <?php echo $march; ?> >March</option>
<option value="April" <?php echo $apr; ?> >April</option>
<option value="May" <?php echo $may; ?> >May</option>
<option value="June" <?php echo $june; ?> >June</option>
<option value="July" <?php echo $july; ?> >July</option>
<option value="August" <?php echo $aug; ?> >August</option>
<option value="September" <?php echo $sep; ?> >September</option>
<option value="Octomber" <?php echo $oct; ?> >Octomber</option>
<option value="November" <?php echo $nov; ?> >November</option>
<option value="December" <?php echo $dec; ?> >December</option>
</select>
Thanks.
Note: Link for the complete example: http://www.javascriptkit.com/script/script2/curdateform2.shtml