I have this select element that displays all products categories.
<div class="form-group">
<label class="control-label">Category</label>
<select (ngModelChange)="setNewCategory($event)" [(ngModel)]="product.productCategory" name="productCategory">
<option *ngFor="let category of productCategoriesPage?.content" [ngValue]="category">{{category.name}}</option>
</select>
</div>
If I want to edit a product, I want to have its category pre-selected in the select option element. Is there something to add in html code or this should be made programatically (ts file).
The solution is to use compareWith directive like follows :
<select [compareWith]="compareFn" (ngModelChange)="setNewCategory($event)" [(ngModel)]="product.productCategory" name="productCategory">
And :
compareFn(pc1: ProductCategory, pc2: ProductCategory): boolean {
return pc1 && pc2 ? pc1.id === pc2.id : pc1 === pc2;
}
Related
In my view I have several category_id inputs.
<select id="category_select1" class="form-control" name="category_id1">
#foreach($category as $c)
<option value="{{$c->id}}">{{$c->name}}</option>
#endforeach
</select>
<select id="category_select2" class="form-control" name="category_id2">
#foreach($category2 as $c)
<option value="{{$c->id}}">{{$c->name}}</option>
#endforeach
</select>
There might be more selectboxes like this so I want to get all of them no mater how many selectboxes there. All the selectbox names will be like category_id1, category_id2.. etc.
$request->input('category_id.*');
But this returns null. What am I doing wrong?
You should use arrays:
#foreach($categories as $i => $category)
<select id="category_select{{$i}}" class="form-control" name="category_id[]">
#foreach($category as $c)
<option value="{{$c->id}}">{{$c->name}}</option>
#endforeach
</select>
#endforeach
and in the controller simply use:
$categories = $request->input('category_id');
foreach($categories as $category_id) {
// ...
}
$request->input('category_id') will be an array of ids
Your solution (different named inputs) is not much reliable.
In any case if you want to use that,
you can use the collections to filter the request inputs by the name to get the categories' ids
Eg.
use Illuminate\Support\Str;
...
$categories = collect($request->all())->filter(function($value, $key) {
return Str::startsWith($key, 'category_id');
})->toArray();
I am looking for help on how to display the second option in a select drop-down menu after the select menu is disabled.
It is disabled if there are fewer than 2 options left. The first option is the 'Please select' option but I would like it to display the one remaining option which is the second option. i.e. 'Scotland' in the code below. The data is pulled in using an Axios call so I do not know what the value will be.
Any help would be greatly appreciated.
The select menu code
<select disabled="disabled">
<option disabled="disabled" value="">Select nationality</option>
<option value="Scotland"> Scotland </option>
</select>
Vue
computed: {
selectDisabled: function() {
return this.options.length <= 2;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="quantity" :disabled="selectDisabled">
<option disabled value="">Select</option>
<option v-for="option in options" :value="option">{{option}}</option>
</select>
</div>
You need to create a special computed property that will dynamically tell the <select> which option it should show inside itself. <select> show the option that matches the <select>'s value.
So:
When the select is disabled (has less than 2 options) force it's value to be the value of the first listed option (this.options[0]).
When the select is enabled, pass the normal value selected by the user (this.value)
I've implemented the logic you need below (make sure to click "Run snippet"):
const App = {
el: '#app',
template: `
<div>
<!--
Remember that writing v-model="quantity" is the same as writing :value="quantity" #input="quantity = $event"
(or #input="quanity = $event.target.value" if you put in HTML elements)
You can't use v-model="valueFormatted" here because this would be the same as writing
:value="valueFormatted" #input="valueFormatted = $event.target.value"
So that's a mistake, because valueFormatted is a computed and you can't assign to it
(unless you create a special computed with a setter, but that's not what you need right now)
-->
<select :value="valueFormatted" #input="value = $event.target.value" :disabled="disabled">
<option disabled="disabled" value="">Select nationality</option>
<option v-for="option in options" :value="option">{{option}}</option>
</select>
<hr>
<div>
<button #click="options = ['Scotland']">Make the select have 1 item</button>
<button #click="options = ['Scotland', 'Poland']">Make the seelct have 2 items</button>
</div>
</div>
`,
data() {
return {
options: ["Scotland", "Poland"],
value: '',
}
},
computed: {
disabled() {
return this.options.length < 2
},
/*
* If this.disabled is true, returns the value of the first option
* If it's false, it returns the normal value from data (user selected)
*/
valueFormatted() {
//watch out - this computed will return undefined if this.disabled is true and if options is empty
//to avoid that, you can do for example this:
//return this.disabled === true ? (this.options[0] ?? '' ) : this.value;
return this.disabled === true ? this.options[0] : this.value;
},
},
}
new Vue(App);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<body>
<div id="app" />
</body>
</html>
You're probably going to use this select's value later to make eg. an API call, so make sure to send this.valueFormatted instead of this.value
I am new in vue js please help.
I have two dropdowns and that that dropdown create from loop
<select v-if="tour.city_expert == 2" v-model="selected[index]" class="form-control" :id="'city_expert_both'+index" v-on:change="intiTourCityExpert(index, $event)" :disabled="tour.is_disable==true">
<option value="" selected>Select City Expert</option>
<option value="Guideinperson">Guide in person</option>
<option value="AudioGuide">Audio Guide</option>
</select>
I as per image I want reset dropdown if I uncheck the checkbox but only reset single row as I uncheck the checkbox.
I set v-model="selected[index]" on dropdown and set code on uncheck this.$set(this.selected, index, ''); but its not working.
Help
I ran into similar situation, and following worked for me.
And to rest try following anywhere - this.selectedStatus = '0';
<select id="item_status" class="form-control" v-model="selectedStatus">
<option value='0'></option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
If I were you, I would do something like this:
Add an onchange event to the checkbox with its index:
#change="onChange(index)"
In the methods object define the function
onChange like this:
methods: {
onChange(index) {
this.selected[index] = ''
}
}
If you want to reset the value of dropdown on click on any other button or so, than just set it to null.
this.accountType = null;
My Dropdown:
<ejs-dropdownlist
v-model:value="accountType"
:dataSource="accountTypesData"
:select="accountTypeSelect"
placeholder="Select a type"
></ejs-dropdownlist>
Help I want to get value from a multiple select dropdown from a form to a controller.
Here's my form:
<select multiple="multiple" id="form-field-select-4" class="form-control search-select" name="tim_teknis">
<option value=""> </option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
And here's my controller:
$tim_teknis = $_POST['tim_teknis'];
It turned out to be showed like this: "tim_teknis" not the value of the dropdown. I hope anyone could understand what I mean. Thank you!
You have to implode the values before insert
May be your form not method is 'POST' , so "tim_teknis" not the value of the dropdown.
Solution:
<form action="submit_form.php" method="POST"><select multiple="multiple" id="form-field-select-4" class="form-control search-select" name="tim_teknis[]"><option value=""> </option><option value="AL">Alabama</option><option value="AK">Alaska</option></select></form><?php if (!empty($_POST['tim_teknis'])) {var_dump($_POST['tim_teknis']);}?>
Result after submit form:
array(2) { [0]=> string(2) "AL" [1]=> string(2) "AK" }
this is my controller:
public ActionResult GenerateReport(string Employeename, int year)
{
EmployeeLeave ds = new EmployeeLeave();
EmployeeLeaveTableAdapter da = new EmployeeLeaveTableAdapter();
da.Fill(ds._EmployeeLeave, Employeename, year);
....
}
this is the code snippet in my index.cshtml:
<form action="/Report/GenerateReport/" method="post">
<select id="Employeename" name="Employeename" class="form-control form- control-lg">
<option value="" disabled selected>Select Name</option>
<option value="ALL">ALL</option>
#foreach (var item in ViewBag.userlist)
{
<option value="#item.username">#item.lastname</option>
}
</select>
<select id="year" name="year" class="form-control form-control-lg">
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<button type="submit" value="Generate Report" class="btn btn-primary">Generate Report</button>
</form>
and this is the sql statement snippet in my dataset table adapter:
WHERE (tblfile_leave.EMP_NAME = #username AND tblfile_leave.YEAR = #year)
it gets whatever the value that is in the select option. however, when i select "ALL" in the dropdown, i'm getting no results at all. how can i display all the result in the select statement in connection to the dropdown option "ALL"
If you are passing integer type to your controller function, it will generate javascript error on selecting Select All option as it has value = All which is a string not an integer. You can see this using some browser tools on console window.
One solution is to render option tag for select All as:
<option value="-1">Select All</option>
This will pass -1 to your controller function. Where you can check like:
if (value.Equals(-1))
{
//Your logic to select all records from database
}
Hope this helps.