jQuery addClass using input select - forms

Im a bit of a jQuery novice.
I have 5 options in a drop down menu.
I want to add a class in a div depending on which option is selected.
This class will then change the layout of the content using CSS.
Here is an example if it helps!
Thanks
<form>
<select>
<option id="1">layout 1</option>
<option id="2">layout 2</option>
<option id="3" selected>layout 3</option>
<option id="4">layout 4</option>
<option id="5">layout 5</option>
</select>
<div class="3">styled content</div>
</form>

You can use the ".attr()" to set the class attribute of the div onchange.
You're best to change the option id to value first. then:
$("select").change(function() {
$("div").attr("class", $(this).val());
});
(EDIT) Change it to:
$("select#np_blog_layout").change(function() {
$("div#changebox").attr("class", $(this).val());
});

What 'rudeovski ze bear' said, but if you still want to set it to the div's class to the selected elements id, here it is.
$('select').change(function() {
$('div').attr('class', $(this).attr('id'));
});

First off, you don't have to use id to your options. Put the values in value attribute. Put ID to your div and select so you can select them using jQuery.
<form>
<select Id="selectElement">
<option value="1">layout 1</option>
<option value="2">layout 2</option>
<option value="3" selected>layout 3</option>
<option value="4">layout 4</option>
<option value="5">layout 5</option>
</select>
<div id="styledContent" class="3">styled content</div>
</form>
On JS
//Attach event handler to select element's onchange event
$('#SelectElement').bind("change",changeStyle);
//The event handler
function changeStyle()
{
//Set class to selected value
$('#styledContent').class($('#SelectElement').val());
}

Related

How to left and right align text in multiple select option in Bootswatch

I'm using Bootswatch Sandstone https://bootswatch.com/sandstone/
And I have a form with source code:
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple="" class="form-control" id="exampleSelect2">
<option><p class="text-left">Subject 1<p><p class="text-right">500 views</p></option>
<option><p class="text-left">Subject 2<p><p class="text-right">400 views</p></option>
</select>
</div>
How to left and right align text values within the options?
To the best of my knowledge, it is not possible to have different formatting within an option tag. One option you could use is have information appear as a tooltip using the title attribute like so:
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple="" class ="form-control" id="exampleSelect2">
<option title="500 views">Subject 1</option>
<option title="400 views">Subject 2</option>
</select>
</div>

How to add an input text field into a select element

I try to develop a custom selectbox with „chosen“ (https://harvesthq.github.io/chosen/).
How can I achieve to add a single input text field ("Eigene Auflage") at the bottom of the opened select box which adds his value to the top, if someone clicks at it types something in. See image: )
Do I have to change the select/option into a ul/li ?
Here is my markup:
<select class="replace-select">
<option value="select-filled-1">Select Filled 1</option>
<option value="select-filled-2">Select Filled 2</option>
<option value="select-filled-3">Select Filled 3</option>
<option value="select-filled-4">Select Filled 4</option>
<option value="select-filled-5">Select Filled 5</option>
<option value="select-filled-6">Select Filled 6</option>
<option value="select-filled-7">Select Filled 7</option>
<option value="select-filled-8">Select Filled 8</option>
</select>
You can do this just by appending a text box to the chosen's created dropdown div, with events to add the contents of the text box to the original select. It's pretty much just a matter of using jQuery to append the box to the right element.
How it works is when you initialize chosen, it hides the select and creates a custom set of nested li's within a few divs. The dropdown div has class .chosen-drop, so you just need to use jQuery to select that element with $(".chosen-drop"), then append the text box to that using $.append(...). Your event handlers then just need to take the contents of that text box and add it to the original select.
$(document).ready(function() {
//initialize the chosen.
$("#chosenSelect").chosen({
width: "100px"
});
//append text box
$("#selectContainer .chosen-drop").append('<input class = "chosen-input"/>');
//click event for enter key
$('.chosen-input').bind("enterKey", function(e) {
//get value of text box, and add it to the select.
var newValue = $(".chosen-input").val();
//insert newValue into an option HTML with template literals
var optionHTML =`<option value="${newValue}">${newValue}</option>`;
$("#chosenSelect").prepend(optionHTML).trigger("chosen:updated");
//clear the textbox after adding to the select
$(".chosen-input").val("");
});
//watch for enter key
$('.chosen-input').keyup(function(e) {
if (e.keyCode == 13) {
$(this).trigger("enterKey");
}
});
});
.chosen-input {
width: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />
<div id="selectContainer">
<label>Press enter to add new item to select</label>
<br>
<select id="chosenSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
Let me know if you need an explanation of any elements in my example.

Angular2 reactive forms select how to set invalid?

I use reactive forms within my app. In a certain form I want to display a required (Validators.required) select like this:
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option *ngIf="!dformControl.value"
value="undefined">
Choose ...
</option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
The problem is whether I use value="undefined" or value="" the form control still is set to valid because it got a value. Do not present the value attribute results in value="Choose ...".
Am I using select with reactive forms in a false way or how would I be able to make the option "Choose ..." being not valid??
Assigning initial value of select control to null will do the trick. Try below,
model_property = null
....
this.fb.group({
....
'control_key' : [this.model_property, Validators.required]
...
})
Check this Plunker!!, Look into app/reactive/hero-form-reactive.component.ts file.
I updated the Plunker to include below and it seems to be working,
<select id="power" class="form-control"
formControlName="power" required >
// see the value is set to empty,
<option value="">Choose...</option>
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
Hope this helps!!
What I do is add a blank option and when that is selected since there is no value it is not valid.
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option></option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>

Change form action according to select option

I have a simple form:
<form name="simple" id="simple" method="post" action="X.php">
<select name="select">
<option value="none"> Select </option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
</select>
</form>
I want X (X.php) to change with option values.
For example, when user selects 1st, it should change to 1.php.
Is it possible?
Yes you can, example with jquery is as follows:
$("#selectID").change(function() {
var action = $(this).val();
$("#simple").attr("action", action + ".php"); // Can also use .prop("action", action + ".php");
});

Custom data-attributes from select_tag not submitting - Rails 4

I have a simple search form_tag in a Rails 4 app.
One of the options is a select_tag:
<%= select_tag "plottable[plottable_id]", options_for_select(Plottable.all.map{ |plottable| [ plottable, plottable.id, { 'plottbale-type' => plottable.class } ] }), prompt: 'Select one option'%>
The HTML is generated properly, resulting in:
<select name="plottable[plottable_id]" id="plottable_plottable_id">
<option value="">Select one option</option>
<option plottable-type="Pool" value="3">Pool1</option>
<option plottable-type="Pool" value="4">Pool2</option>
<option plottable-type="Asset" value="33">Asset1</option>
<option plottable-type="Asset" value="34">Asset2</option>
</select>
When submitting the form the plottable-type does not get submitted. Here are the params:
Parameters: {"utf8"=>"✓", "from_time"=>"", "to_time"=>"", "plottable"=>{"plottable_id"=>"35"}, "commit"=>"Search"}
Thanks for your suggestions.
Just try this:
<select name="plottable[plottable_id]" id="plottable_plottable_id">
<option value="">Select one option</option>
<option plottable-type="Pool" value="3">Pool1</option>
<option plottable-type="Pool" value="4">Pool2</option>
<option plottable-type="Asset" value="33">Asset1</option>
<option plottable-type="Asset" value="34">Asset2</option>
</select>
<input type="hidden" name=plottable[type] value="", id="plottable_plottable_type">
$('#plottable_plottable_id').on('change', function(){
var type = $('option:selected', this).attr('plottable-type');
$('#plottable_plottable_type').val(type);
})
you can add hidden field tag by rails code as well
<%= hidden_field_tag "plottable[plottable_type]"%>