Enable/disable the custom field when another custom field is selected - ruby

I need to disable one custom field when other custom field is selected. For example, I have an custom field with dropdown format. When i click on 2nd option of a particular custom field,the other custom field should be disabled and one more custom field should be enabled. How do i do that in redmine?

As I understood you wanted to change the option of 2nd dropdown box on bases of 1st dropdown's option selection:
This is sample code which perform the same using Jquery. You can modify it as per your requirement.
HTML
<select class="product" id="select_1" name="product">
<option selected="selected" value=""> Choose Category </option>
<option value="Mens Suits"> Mens Suits </option>
<option value="Womens Suit"> Womens Suits </option>
<option value="Children Suit"> Children Suits </option>
</select>
<select class="size" id="select_3" name="size">
<option selected="selected" value=""> Choose Size </option>
</select>
Jquery:
var men = '<option selected="selected" value=""> Choose Size </option><option value="36">36</option><option value="38">38</option><option value="40">40</option>';
var women = '<option selected="selected" value=""> Choose Size </option><option value="26">26</option><option value="28">28</option><option value="30">30</option>';
var children = '<option selected="selected" value=""> Choose Size </option><option value="12">12</option><option value="11">11</option><option value="10">10</option>';
$(document).ready(function(){
$("select#select_1").on('change',function(){
if($(this).val()=="Mens Suits"){
$("select#select_3").html(men);
}else if($(this).val()=="Womens Suit"){
$("select#select_3").html(women);
}else if($(this).val()=="Children Suit"){
$("select#select_3").html(children);
}
});
});
Working Demo
I hope this helps you. :)

Related

Inside the selectBox dropdown list style not working

This is my markup; when I style the option tag it will not take any style properties.
<form>
<select>
<option value='Select Reason'>
Select Reason
</option>
<option value='Select Reason' >
Select Reason
</option>
<option value='Select Reason' >
Select Reason
</option>enter code here
</select>
</form>

Setting selected option in laravel from database

I have a problem here, I want to make an edit form, I want the province that appears in the edit form to be the province selected from the database, here my code
<select name="provinsi" id="provinsi" class="form-control">
<option value="">Pilih Provinsi</option>
#foreach ($province as $prov)
<option value="{{$prov->name}}">{{$prov->name}}</option>
#endforeach
</select>
here my controller code
public function ShowSantri(Request $request,$id)
{
$province = DB::table('provinces')->get();
$profiles = Profile::find($request->id);
return view('admin/modal/edit_santri',compact('profiles','province'));
You can try like this:
<select name="provinsi" id="provinsi" class="form-control">
<option value="">Pilih Provinsi</option>
#foreach ($province as $prov)
<option value="{{$prov->name}}"
#if ($profiles['provName'] == $prov->name)
selected
#endif>
{{$prov->name}}
</option>
#endforeach
</select>
Just I'm not sure what is name in your $profiles for province. But I think that is what you need.
Here and here are some examples.
Good luck!
Use or change this code based on your needs:
<option value="{{$prov->name}}" {{ $prov->name == $profiles->prov_id ? "selected" : "" }}>{{$prov->name}}</option>
I think the $prov->name should be $prov->id, if not, you can change $profiles->prov_id to $profiles->prov_name. It depends on your database structure.

is it possible to add label tag inside option?

I'm trying to do something like this on the dropdown
I already tried different tag but failed to see the expected
<option id="makeDefault" value="0">Make <label class="option-placeholder">e.g. BMW, Mercedes</label></option>
Try this:
<select>
<option value="" disabled selected hidden>MAKE e.g. BMW...</option>
<option value="0">list item 1</option>
<option value="1">list item 2</option>
</select>
FIDDLE: https://jsfiddle.net/L0k6x0dh/1/

Multiple selection of dropdown menu and direct to a link

I am looking for JavaScript or in jquery for my custom dropdown menu
<form name="menu">
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Courses</option>
<option value="http://www.google.com">Course1</option>
<option value="http://www.youtube.com">Course2</option>
<option value="http://www.yahoo.com">Course3</option>
</select>
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Location</option>
<option value="http://www.google.com">Location1</option>
<option value="http://www.youtube.com">Location2</option>
<option value="http://www.yahoo.com">Location3</option>
</select>
</form>
http://jsfiddle.net/kundansingh/d4FEV/2/
in this if i select any of the course and then the location it should redirect to a paticular url, so for each course, different locations will be there and url
Follow steps:
Just pass the value(url) to a javascript function as an argument.
Grab that value in that javascript function.
Redirect the url (might use window.location.assign(url) function)`

Change dropdown colour on selection

I have a dropdown which has different colours for each option, however when the option is chosen I would like the select background to change to the color I have chosen.
I have found an answer to this query, however this uses inline styles and I would like to use my external CSS.
Changing color of a row in dropdown list
See My JSFiddle
<select name="select" style="background-color: #ff0000" onchange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor;">
<option style="background-color: #ff0000" value="1">Red</option>
<option style="background-color: #00ff00" value="2">Green</option>
<option style="background-color: #0000ff" value="3">Blue</option>
</select>
if you want to use external css, then
<select name="select" class="Red" onchange="this.className = this.options[this.selectedIndex].className">
<option class="Red" value="1">Red</option>
<option class="Green" value="2">Green</option>
<option class="Blue" value="3">Blue</option>
</select>
here is the updated jsfiddle

Resources