how to get html select box option selecteditem real value - jquery-selectbox

I'm getting DB data from the select box list.
When saving, the option value is 1, but is there a way to pass the id of the selected item as well?
When saving, yes or no is 0 or 1, but the id of the actually selected itemList should be stored in another table.
$("#racker_enabled").change(function(){
var selected_id = $("#tracker_enabled option:selected").val(); // option value 1만 찍힘..
});
<select name="tracker_enabled" id="tracker_enabled">
<option th:value="0" th:text="#{projects.Notused}"> </option>
<option th:value="1" th:if="${project.tracker_enabled == T(com.Type.EnumYn).Y}"
th:each="issuetrackerList:${issuetrackerList}"
th:utext="${issuetrackerList.name}"
th:selected="${issuetrackerList.id == selectedIssuetracker.issue_tracker_id}">
</option>
</select>
// Data contained in the model
// I need the id value in bold below.
trackerList :
[IssueTracker (id=13, tracker_id=null, name=mantis, tracker_name=null, type=null, configuraion=null),
IssueTracker(id=14, tracker_id=null, name=mantis113,tracker_name=null, type=null, configuraion=null),
IssueTracker(id=11, tracker_id=null, name=Test IssueTracker, tracker_name=null, type=null, configuraion=null),
IssueTracker(id=15, tracker_id=null, name=gggg, tracker_name=null, type=null, configuraion=null)]
selectedTracker :
IssueTracker(id=200, issue_tracker_id=11, name=1111, issue_tracker_name=Test Tracker, type=1, configuraion=null)

Related

vue - select option change triggers vuex mutation error

I'm using vue2.
I want to get select option object in v-for
HTML:
<select
class="custom-select"
#change="onPlanSelected($event)"
v-model="selectedPlan.objectId">
<option
v-for="plan in plans"
:key="plan.objectId"
:value="plan.objectId">
{{ plan.title }}
</option>
</select>
JS:
data () {
return {
selectedPlan: {}
}
}
onPlanSelected (event) {
this.selectedPlan = this.plans.find(plan => {
return plan.objectId === event.target.value
})
}
when I change the select option, I get the error:
As you can see selectedPlan is data not vuex.
Btw, how to get an object from a select v-for option
Thanks
First of all I don't see the need of using #change in your case. v-model should be sufficient for handling the selected option.
Here is a sample fiddle: https://jsfiddle.net/z11fe07p/567/
As long as you have the whole object as :value and v-model as well you always have the selected option along with it's id.

How to generate form using Illuminate/HTML and database values in Laravel?

I saw this question: Generate drop-down list input with values from DB table, but the answer was not clear.
So, how can I generate form using Illuminate/HTML and database values in Laravel?
It's this simple.
First, you have to pass an array with the select values from the controller:
/**
* Show the form for creating a new resource.
*
* #return Response
*/
public function create()
{
$categories = Category::lists('name','id');
return view('myformview', compact('categories'));
}
Where "Category" is the model I want to retrieve data from. Note I am passing two values to the array. The first one is the text will be displayed in the select, and the second one is the value of the option.
Let's see now the form:
{!! Form::label('category_id', 'Category:') !!}<br>
{!! Form::select(
'category_id',
$categories
)
!!}
The first parameter of Form::select is the name of the select. The second one is the array with the options values.
In my particular case I get back this HTML code:
<select id="category_id" name="category_id">
<option value="5">First category</option>
<option value="6">Second category</option>
<option value="7">Third category</option>
</select>
I hope this will be helpful for you. I tested it in Laravel 5

How to generate input select in laravel blade form and customize its options value?

I'm trying to create a laravel form that have an input select generating from array of strings coming from controller.
How can I set values of options manually?
In controller :
public function create()
{
$eventTypes = EventType::all()->lists('title');
return View::make('events.create')->with(compact('eventTypes'));
}
In view (blade) :
{{ Form::label('eventType', 'Type') }}
{{ Form::select('eventType', $eventTypes, null, array('class'=> 'form-control')) }}
And select created as :
<select class="form-control" id="eventType" name="eventType">
<option value="0">Sport Competition</option>
<option value="1">Movie</option>
<option value="2">Concert</option>
</select>
I just want to set values manually.
The value in the options is just the key of the array. The second parameter to the lists() method will let you choose a field to use as the key:
// use the 'id' field values for the array keys
$eventTypes = EventType::lists('title', 'id');
If you want to do something more custom than that, you'll need to manually build your array with the key/value pairs you want.
Edit
As mentioned by #lukasgeiter in the comments, there is no need to call all() first.
EventType::all()->lists() will first generate a Collection of all the EventType objects. It will then call lists() on the Collection object, meaning it will loop through that Collection to build an array with your requested fields.
EventType::lists() will call lists() on the query builder object, which will just select the two requested fields and return those as the array. It will not build any EventType objects (unless you select a field built by a Model accessor).

Python - WTForms Coerce to Object

I'm using a SelectMultipleField in a WTForm class that gets values from MongoDB.The input needs to be coerced to handle these MongoDB object IDs or I get this error:
Invalid choice(s): one or more data inputs could not be coerced
I have tried the following.
groups = SelectMultipleField("Groups: ", coerce=object)
but it doesn't doesn't work.
Here's what the HTML looks like (notice the object IDs used for value):
<select class="form-control" id="groups" multiple name="groups">
<option value="53921416b45ba747082829f1">My Group</option>
<option value="53921c1402b8754f85446e5a">ttt</option>
<option value="53921cf602b8755019a9562e">Developers</option>
<option value="53921de202b875518e449bad">sadf</option>
<option value="53921fa902b87553366482cc">asdf</option>
</select>
What is the correct way to coerce the value (to handle object IDs)?
It turns out you just need to use ObjectID() from MongoDB. First, import ObjectID
from bson import ObjectID
Then modify your coerce parameter to
coerce=ObjectId

How to get selected menu option from a knockout.js observableArray?

I feel like I'm missing something very basic, but I can't get a dropdown menu to work as I expect using Knockout.js.
I have a set of objects I want to present in a menu, and I need to find the selected option and post that to the server. I can get the menu to render, but can't seem to get the value of the selected item. My view model looks like this:
function ProjectFilterItem( name, id ) {
this.Name = name;
this.Id = id;
}
function FilterViewModel() {
this.projectFilters = ko.observableArray([
new ProjectFilterItem( "foo", "1" ),
new ProjectFilterItem( "bar", "2" ),
new ProjectFilterItem( "baz", "3" )
]);
this.selectedProject = ko.observable();
}
ko.applyBindings( new FilterViewModel() );
and my view markup looks like this:
<select
id = "projectMenu"
name = "projectMenu"
data-bind = "
options: projectFilters,
optionsText: 'Name', /* I have to enquote the value or I get a JS error */
optionsValue: 'Id', /* If I put 'selectedProject here, nothing is echoed in the span below */
optionsCaption: '-- Select Project --'
"
></select>
<b>Selected Project:</b> <span data-bind="text: selectedProject"></span>
How do get the selected menu item to display in the span, and to post to the server? (I assume the observable I render in the span is the same one I'd post.) Do I need another property in the ProjectFilterItem, like this.selected = ko.observable(false); ? If so, how would I declare it as the target of the value?
You just need use with the value binding to bind the selected value:
From the options documentation:
Note: For a multi-select list, to set which of the options are
selected, or to read which of the options are selected, use the
selectedOptions binding. For a single-select list, you can also read
and write the selected option using the value binding.
In your example:
<select
id = "projectMenu"
name = "projectMenu"
data-bind = "
value: selectedProject,
options: projectFilters,
optionsText: 'Name',
optionsValue: 'Id',
optionsCaption: '-- Select Project --'
"
></select>
See Demo.