'''
<option value="all">#lang('lang_v1.all_category')</option>
#foreach($categories as $category)
<option value="{{$category['id']}}">{{$category['name']}}</option>
#endforeach
#foreach($categories as $category)
#if(!empty($category['sub_categories']))
<optgroup label="{{$category['name']}}">
#foreach($category['sub_categories'] as $sc)
<i class="fa fa-minus"></i> <option value="{{$sc['id']}}">{{$sc['name']}}</option>
#endforeach
</optgroup>
#endif
#endforeach
</select>
'''
I have tried several way but i could not achieve it.
database structure image
I only want to select the categories with id 1,2 and 3 from the above picture
Related
I have an array of objects
private data=[{title:'a',num:10},{title:'b',num:20},{title:'c',num:30}];
and I want, for each of the objects to create a select box that modifies it's num field
<form class="form-horizontal" (ngSubmit)='onSubmit()'>
{{ data | json }}
<div *ngFor="let item of data;let i=index">
<div>{{ data[i]['title'] }}</div>
<select [(ngModel)]="data[i]['num']">
<option [ngValue]="10">10</option>
<option [ngValue]="20">20</option>
<option [ngValue]="30">30</option>
</select>
</div>
...
IF THE CODE IS INSIDE A FORM, then the data is NEVER updated and all select box start empty
thanks
You're accessing a private property in your template, it has to be public.
Component
public data=[{title:'a',num:10},{title:'b',num:20},{title:'c',num:30}];
Template
{{ data | json }}
<div *ngFor="let item of data;">
<div>{{ item.title }}</div>
<select [(ngModel)]="item.num">
<option [ngValue]="10">10</option>
<option [ngValue]="20">20</option>
<option [ngValue]="30">30</option>
</select>
</div>
Working example :
https://stackblitz.com/edit/angular-ivy-nazzvh?file=src/app/app.component.html
apparently, forms and angular still dont go well together
I changed to and it works like a charm
<form class="form-horizontal" (ngSubmit)='onSubmit()'>
{{ data | json }}
<div *ngFor="let item of data;let i=index">
<div>{{ data[i]['title'] }}</div>
<select [(ngModel)]="data[i]['num']">
<option [ngValue]="10">10</option>
<option [ngValue]="20">20</option>
<option [ngValue]="30">30</option>
</select>
</div>
I'm using Materialize css framework to develop a custom web app for my company.
So at one point I have to display a select containing a few tasks, grouped by project, using optgroups. Every project is different from one another, and so are the related tasks BUT some tasks may have the same name (even if they are stored with different Ids in the database).
To be as precise as possible, let's say my project "Project One" has a task 'R&D' (id=1) and a task 'Developpement' (id=2). My project "Project Two" has a task "Meeting with customer" (id=3) and a task 'R&D' (id=4).
So the original html select has the right option selected (id=4) but the material select rendered has the first option with the name "R&d" selected...
<select id="selectId" name="SelectName">
<option value="">Select Main task</option>
<optgroup label="Project 1">
<option value="420">Task Name 1</option>
<option value="421">Task Name 2</option>
</optgroup>
<optgroup label="Project 3">
<option value="2168">Task Name 7</option>
<option value="2169" selected="selected">Task Name 2</option>
</optgroup>
</select>
renders
<div class="select-wrapper">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-75d04c8c-c252-a1ab-a84a-b5e81f275405" value="Task Name 2">
<ul id="select-options-75d04c8c-c252-a1ab-a84a-b5e81f275405" class="dropdown-content select-dropdown"
style="width: 250px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
<li class=""><span>Select Main task</span></li>
<li class="optgroup"><span>Project 1</span></li>
<li class="optgroup-option "><span>Task Name 1</span></li>
<li class="optgroup-option"><span>Task Name 2</span></li>
<li class="optgroup"><span>Project 3</span></li>
<li class="optgroup-option "><span>Task Name 7</span></li>
<li class="optgroup-option "><span>Task Name 2</span></li>
</ul>
<select id="task_mainTaskQuote" name="task[mainTaskQuote]" required="required" class="initialized">
<option value="">Select Main task</option>
<optgroup label="Project 1">
<option value="420">Task Name 1</option>
<option value="421">Task Name 2</option>
</optgroup>
<optgroup label="Project 2">
<option value="465">Task Name 3</option>
<option value="466">Task Name 4</option>
<option value="467">Task Name 5</option>
<option value="2739">Task Name 6</option>
</optgroup>
<optgroup label="Project 3">
<option value="2168">Task Name 7</option>
<option value="2169" selected="selected">Task Name 2</option>
<option value="2170">Task Name 8</option>
<option value="2180">Task Name 9</option>
<option value="2181">Task Name 10</option>
</optgroup>
</select>
</div>
Here is a jsFiddle about it : https://jsfiddle.net/h7vu2nb1/
Any hints on what I do wrong in this case or on how I can prevent this behaviour?
Thx
This might not be a proper solution but, going through materialize forms.js file on their Github, it appears that the javascript code initializing their select uses the name of the option, not its value. So you are not doing anything wrong, it's just that the way the plugin works doesn't fit your needs.
However regarding your issue I can't provid you more help.
Hi I want to Pass input elements values while clicking button using post method and pass values to next view using CI. When submitting the button with values in input elements and redirecting it works well. But When I'm refreshing after redirecting the page the values of input elements are lost and shows blank page/the page i display when the value becomes null.
1st View
<form action="<?php echo base_url() ?>Mapcontrol/display_garage_by_location" method="post">
<div class="section_1">
<select id="cmbcity" name="cmbcity" class="frm-field required">
<option value="null">Select Your City</option>
<option value="1">fghfghfghf</option>
<option value="2">fghfghfgh</option>
<option value="3">fghfgh</option>
<option value="4">ffffffff</option>
<option value="5">hhhh</option>
<option value="6">dddd</option>
<option value="7">treee</option>
<option value="8">kiu</option>
</select>
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="input-group">
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
<input type="text" id="txtPlaces" placeholder="Enter a location" />
<input type="hidden" id="city2" name="city2" />
<input type="hidden" id="cityLat" name="cityLat" />
<input type="hidden" id="cityLng" name="cityLng" />
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="section_1">
<select id="cmbvehicletype" name="cmbvehicletype" class="frm-field required">
<option value="null">Type</option>
<option value="cr">dd</option>
<option value="mb">ghjghjd</option>
<option value="tk">ghjghj</option>
<option value="ar">hgjghj</option>
<option value="bi">gggh</option>
<option value="ov">gg</option>
</select>
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="section_1">
<select id="cmbservice" name="cmbservice" class="frm-field required">
<option value="null">Select</option>
<option value="vr">vr</option>
<option value="oc">oc</option>
<option value="br">br</option>
<option value="vs">vc</option>
<option value="sp">cc</option>
<option value="os">cd</option>
</select>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-2 submit_button">
<input type="submit" id="searchindex" value="SEARCH"/>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
Controller
public function display_garage_by_location()
{
// Loading Library
$this->load->library('googlemaps');
//Initialize our map. Here you can also pass in additional parameters for customising the map
$this->googlemaps->initialize();
// Create the map. This will return the Javascript to be included in our pages <head></head> section and the HTML code to be
// placed where we want the map to appear.
$data['map'] = $this->googlemaps->create_map();
// Load our view, passing the map data that has just been created
//$this->load->view('my_view', $data);
$data['locationvalue']=$this->input->post('city2');
$data['latvalue']=$this->input->post('cityLat');
$data['longvalue']=$this->input->post('cityLng');
$data['vehicleid']=$this->input->post('cmbvehicletype');
$data['serviceid']=$this->input->post('cmbservice');
$this->garage_location_markers($data);
}
public function garage_location_markers($data)
{
$this->load->view('templates/_header');
$this->load->view('content/locations-in-marker-view',$data);
$this->load->view('templates/footer');
}
2nd View
// In Second View I want to display if location value is null then dispaly no data found else display search results ..
The Problem is When location is not null it displays the details but when i refresh the page again control go back to the controller and results no data found.. How to Solve this?
Try Like this
In View
View user
In Controller
public function FunctionName($id) # determine function that receiving incoming parameter
{
if (empty($id)) {
echo "Token Missed Matched";
}
else{
# get data from model
$result = $this->model_name->model_function($id);
if(empty($result))
{
echo "No data found";
}
else{
$this->load->view('view_name');
}
}
}
How can i remove the optgroup from a checkbox field
<?= $form->field($model, 'survey_type')->dropDownList([$surveyTypeList],['prompt'=>'Select Survey Type','id'=>'Survey_Type_dropdown']) ?>
provides following html
<label class="control-label" for="Survey_Type_dropdown">Type</label>
<select id="Survey_Type_dropdown" class="form-control" name="Surveys[survey_type]">
<option value="">Select Survey Type</option>
<optgroup label="0">
<option value="2D">2D</option>
<option value="3D">3D</option>
</optgroup>
</select>
<div class="help-block"></div>
You have to send $surveyTypeList as a variable, not a array.
Just remove [].
I have designed a website in Adobe Muse. I have an order form that has options to select an item from a drop down list, which has its own price, and then after all items are selected a total is generated.
Heres the code that i have and just need the calculate section of the code and JavaScript if possible:
<form name=myform>
<select name=mytextarea>
<option name=one value=one> </option>
<option name=two value=two> Standard Digital </option>
<option name=three value=three> Matte Laminated </option>
</select>
</form>
<form name=myform>
<select name=mytextarea>
<option name=one value=one> </option>
<option name=two value=two> 5.5mm x 5.5mm </option>
<option name=three value=three> 8.5mm x 5.5mm </option>
<option name=four value=four> 9.0mm x 5.0mm </option>
</select>
</form>
<form name=myform>
<select name=mytextarea>
<option name=one value=one> </option>
<option name=two value=two> 125 </option>
<option name=three value=three> 250 </option>
<option name=four value=four> 500 </option>
</select>
</form>
<form name=myform>
<select name=mytextarea>
<option name=one value=one> </option>
<option name=two value=two> Same Day Collection</option>
<option name=three value=three> Delivery (+ £10)</option>
</select>
</form>
so for each option i need a price to generate and then after all options have been selected, a total should be generated.
Right my thoughts on this are that you would be better to use PHP to do this and then use an
<iframe> </iframe>
Place this is Muse from selecting Object > insert HTML
PHP is very good for this and there are plenty of bits you can find online to get it done.
That's what I would do if it was me.
Cheers