i am trying to chaneg the colour of text using twitter-bootstrap but something is wrong it is not working.
here is my code:
<select name="number" '<?=htmlspecialchars($s['number'])?>'td>"
<option><?=htmlspecialchars($s['number'])?></option>
<option class="text-cuccess">Tak</option>
<option class="text-danger">Nie</option>
</select>
.newcolor {
color:red;
}
.newcolor1{
color:green;
}
<select id="select" onchange="this.className=this.options[this.selectedIndex].className">
<option style="color:gray" value="null">select one option</option>
<option value="1" class="newcolor">one</option>
<option value="2" class="newcolor">two</option>
<option value="2" class="newcolor1">two</option>
</select>
Related
This question already has answers here:
jQuery ID selector works only for the first element
(7 answers)
Closed 5 years ago.
This the HTML code
<label class="col-lg-6">37.sample 1 </label>
<select class="form-control" id="colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">38. sample 2</label>
<select class="form-control" id="colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">39. sample 3</label>
<select class="form-control" id="colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
HTML output
:
Script
$(document).ready(function() {
$("#colorchg").each(function() {
var color = $("#colorchg").val();
$(this).css("background", color);
});
$("#colorchg").change(function() {
var color = $("#colorchg").val();
$(this).css("background", color);
});
});
But it only changes the bg-color of the first instance
How should the script change in order to implement it in every dropdown list
Try this:
$(document).ready(function() {
$(".colorchg").each(function() {
$(this).css("background", $(this).val());
});
$(".colorchg").change(function() {
$(this).css("background", $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-lg-6">37.sample 1 </label>
<select class="form-control colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">38. sample 2</label>
<select class="form-control colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">39. sample 3</label>
<select class="form-control colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
By using classes, jQuery will find more than one element to use. ID's need to be unique, so it assumes it's only one element.
Instead of searching for the value again in the functions, you should use this, otherwise the backgrounds will change to whatever the first option is set to.
You can't use the same ID multiple times on a page - IDs need to be unique. If you try to find it, it'll only get the first one, since only one should exist. Instead use the class .form-control as your selector.
id need to be unique. Beside create a common function and trigger that function onchange of select.The value val() will give current selected option. Use that value as css property value
function changeBck(elem) {
$(elem).css("background", $(elem).val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-lg-6">37.sample 1 </label>
<select class="form-control" id="colorchg_1" onchange='changeBck(this)'>
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">38. sample 2</label>
<select class="form-control" id="colorchg_2" onchange='changeBck(this)'>
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">39. sample 3</label>
<select class="form-control" id="colorchg_3" onchange='changeBck(this)'>
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
I am using the Themify builder and I created a small form in a text block in the builder.
There is unintentional gap above the fields. You can view it live here.
HTML:
<form action="contact_info.php" method="get">
Loan Calculator
<select class="form-inline">
<option value="1000">$1,000 Loan</option>
<option value="2000">$2,000 Loan</option>
<option value="5000">$5,000 Loan</option>
<option value="7500">$7,500 Loan</option>
<option value="10000">$10,000 Loan</option>
<option value="12000">$12,000 Loan</option>
<option value="15000">$15,000 Loan</option>
<option value="17000">$17,000 Loan</option>
<option value="20000">$20,000 Loan</option>
<option value="25000" selected="selected">$25,000 Loan</option>
<option value="30000">$30,000 Loan</option>
<option value="40000">$40,000 Loan</option>
<option value="50000">$50,000 Loan</option>
<option value="60000">$60,000 Loan</option>
<option value="70000">$70,000 Loan</option>
<option value="80000">$80,000 Loan</option>
<option value="90000">$90,000 Loan</option>
<option value="100000">$100,000 Loan</option>
</select>
<select class="form-inline">
<option value="1">1 Year</option>
<option value="2">2 Years</option>
<option value="3">3 Years</option>
<option value="4">4 Years</option>
<option value="5" selected="selected">5 Years</option>
<option value="6">6 Years</option>
<option value="7">7 Years</option>
</select>
<input type="submit" value="Calculate" class="form-inline">
</form>
CSS:
.form-inline {
display: inline-block;
margin: 0px;
float: left;
}
Hi please remove <br> tag between <select> in your code and your form fields will be shown as you want. <br> tag forces to break the line, that is why see such gaps.
On your demo page, there are <br> tag after every element in the form, please remove that.
I figured out the problem.
Wordpress adds <br> tags automatically if there is whitespace between form tags.
I removed all the whitespaces between every single tag and the problem was solved.
<select class='ui selection dropdown' name='YearLevel' style="display:none" id='YearLevel'>
<option value=''>Year Level</option>
<option value='II'>I</option>
<option value='II'>II</option>
<option value='III'>III</option>
<option value='IV'>IV</option>
</select>
<style>
select#YearLevel{
display:none !important;
}
</style>
I tried everything I know but it just wouldn't work.
I am trying to have datalist list element always visible. As standard after focused lost, the arrow disappears.
I would like to have it always like this:
Here is the plunker: https://plnkr.co/edit/?p=preview
<input list="browsers" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
ENVIRONMENT: Angular directive
Any ideas how to achieve it?
Best,
I have got the arrow always visible using css:
input::-webkit-calendar-picker-indicator {
opacity: 100;
}
<input list="browsers" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
For the first time i needed to restyle some dropdown select menu's. Only they leave me with a problem.
I can't seem to get them lined up with the submit image. Anyone got any tips? Maybe i'm overlooking something simple.
<body>
<div class="filterbalk">
<form>
<label>
<select style="width: 250px;">
<option>Woningtype</option>
</select>
</label>
<label>
<select style="width: 250px;">
<option>Plaats</option>
</select>
</label>
<label>
<select style="width: 90px;">
<option value="0">Prijs van</option>
<option value="0">0</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
<option value="1000">1000</option>
</select>
</label>
<label>
<select style="width: 90px;">
<option value="1000000000">Prijs tot</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
<option value="1000">1000</option>
<option value="1000000000">1000+</option>
</select>
</label>
<input type="image" src="http://www.wauwwebdesign.nl/problem/buttonFilter.jpg" value="Filter" id="submit">
</form>
</div>
Both HTML and CSS can be found in the fiddle. I can't seem to paste the CSS here.
http://jsfiddle.net/5FcLf/
I think all you need to add is
#submit {
display: inline-block;
vertical-align: top;
}
JSFiddle
Then tweak...