I am adding new options to a select menu by the following way:
var options1 = {
val1 : 'text1',
val2 : 'text2'
};
$.each(options1, function(val, text) {
$('#SelectMenu').append( new Option(text,val) );
});
How can we set the properties like a default selected option and optgroup options available in JQM?
Live Example: http://jsfiddle.net/rULKH/5/
<div data-role="page" data-theme="b" id="option-page">
<div data-role="content">
<div data-role="fieldcontain">
<label for="SelectMenu" class="select">Select Menu</label>
<select name="SelectMenu" id="SelectMenu">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div>
</div>
JS
var options1 = {
val1 : 'text1',
val2 : 'text2'
};
$.each(options1, function(val, text) {
$('#SelectMenu').append(new Option(text,val)).val( val ).attr('selected',true).selectmenu("refresh");
});
Related
I just want to show the spinner during option selection
<div wire:ignore class="mt-0 ">
<select class="form-control form-control-sm custom__select " id="select2" wire:model="check">
<option value="10">-- Select region --</option>
#foreach($regions as $region)
<option value="{{ $region->region_id }}">{{ $region->title_ru }}</option>
#endforeach
</select>
</div>
#if($loadState)
<div class="position-relative">
<div class="spinner-border spinner-border-sm text-light " role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
#endif
#push('scripts')
<script>
$(document).ready(function () {
$('#select2').select2({
placeholder: 'Select an option',
});
$(document).on('change', '#select2', function (e) {
#this.set('selRegion', e.target.value);
});
});
</script>
#endpush
controller:
public function updatedCheck()
{
$this->loadState = true;
}
this works without wire:ignore, but select2 itself doesn't work without it. i saw a similar question, but can't figure out how to apply it to my example
I build a dynamic dropdown in select option but when i implement a select2 package it not work. Here is my code. The value of type not passing to the court select.
here is my Blade.php
{{$selectedType}}
<div class="row g-3 mb-3">
<div class="col-md">
<div class="form-floating" wire:ignore>
<select class="form-select" id="type" wire:model="selectedType" required>
<option value="">Select Court Type</option>
#foreach($types as $type)
<option value="{{$type->id}}">{{$type->court_type_name}}</option>
#endforeach
</select>
<label for="floatingInputGrid">Type</label>
</div>
</div>
#if (!is_null($courts))
<div class="col-md">
<div class="form-floating" wire:ignore>
<select class="form-select" wire:model="selectedCourt" required>
<option value="">Select Court Location</option>
#foreach($courts as $court)
<option value="{{$court->id}}">{{$court->court_name}}, {{$court->province}}</option>
#endforeach
</select>
<label for="floatingInputGrid">Court Location</label>
</div>
</div>
#endif
</div>
The livewire components works perfectly but in select2 it not work
public function render()
{
$types = Type::All();
$periods = Period::All();
return view('livewire.collection.add', compact('types', 'periods'));
}
public function updatedSelectedType($court_id)
{
$this->courts = Court::where('court_type', $court_id)->orderBy('court_name')->get();
}
public function updatedSelectedCourt($clerk_id)
{
$this->clerks = Clerk::where('court', $clerk_id)->get();
}
Select2
<script>
$(document).ready(function () {
$('.form-select').select2();
$('#type').on('change', function (e) {
var data = $('#type').select2("val");
#this.set('selectedType', data);
});
$('#court').on('change', function (e) {
var data = $('#court').select2("val");
#this.set('selectedCourt', data);
});
});
</script>
Nothing happen when clicked.
I solve select2 element in Livewire like this.
<div class="form-floating">
<select class="form-select" wire:model="selectedCourt">
<option value="">Select Court Location</option>
#foreach($courts as $court)
<option value="{{$court->id}}">{{$court->court_name}}</option>
#endforeach
</select>
<label for="floatingInputGrid">Court Location</label>
</div>
//
<script>
$(document).ready(function() {
window.initSelectDrop=()=>{
$('.form-select').select2({
placeholder: '{{ __('locale.Select') }}',
allowClear: true
});
initSelectDrop();
$('.form-select').on('change', function (e) {
livewire.emit('selectedItemCourt', e.target.value)
});
window.livewire.on('select2',()=>{
initSelectDrop();
});
});
</script>
in component
public function hydrate()
{
$this->emit('select2');
}
public $listeners = ['selectedItemCourt'];
//.....
public function selectedItemCourt($value)
{
dd($value);
$this->selectedCourt = $value;
}
I am trying to pass a list of ids to IActionResult on button submit. The ids are coming from dropdown list selections. My view is a partial-view getting a model object. the problem is right now when i submit, the list is empty always.
I have read that we can not pass a list to controller! then what are the possible approaches, I am literally stuck on this for a day!
I have only pasted part of the code i felt is necessary to show,
please let me know if you want to see other code.
View.cshtml
<form method="post" asp-page-handler="UpdateComponent">
.
.
.
#{
var value1 = 0;
var value2 = 0;
var value3 =0;
}
<!-- asp-items="New plant SelectList"-->
<select class="form-control Shoplist News-plant-select_1 mt-2" data-search="true" asp-for="#value1">
<option value="">Bitte auswählen</option>
</select>
<br />
<!-- asp-items="New plant SelectList"-->
<select class="form-control Shoplist News-plant-select_2 mt-2" data-search="true" asp-for="#value2">
<option value="">Bitte auswählen</option>
</select>
<br />
<!-- asp-items="New plant SelectList"-->
<select class="form-control Shoplist News-plant-select_3 mt-2" data-search="true" asp-for="#value3">
<option value="">Bitte auswählen</option>
</select>
#{
Model.newsletterSubComponents.Add(new Models.NewsletterSubComponents() { NewPlantArticleId = value1 });
Model.newsletterSubComponents.Add(new Models.NewsletterSubComponents() { NewPlantArticleId = value2 });
Model.newsletterSubComponents.Add(new Models.NewsletterSubComponents() { NewPlantArticleId = value3 });
}
<input type="hidden" name="value1" value="#Model.newsletterSubComponents" asp-for="#Model.newsletterSubComponents"/>
.
.
.
<input type="submit" value="Speichern" class="btn btn-primary" />
</form>
controller
public IActionResult OnPostUpdateComponent(NewsletterComponents component, int? newsId, int? shortArticleId,
List<NewsletterSubComponents> newsletterSubComponents, int? test)
{
^
|
list empty
.
.
.
}
i populate dropdown lists using ajax
$.ajax(settings).done(function (data) {
$.each(data, function (index, element) {
$('.News-plant-select_1').append($("<option>").val(element.Id).text(element.NameGerman));
console.log(element.NameGerman);
$('.News-plant-select_2').append($("<option>").val(element.Id).text(element.NameGerman));
console.log(element.NameGerman);
});;
//remove spinner
$('.News-plant-select').removeClass("spinner-border");
});
If you want to receive ids, I think you can just use List< int > to receive it, also keep the parameter name the same as that in select element. I made an example based on your codes:
<form method="post" asp-page-handler="UpdateComponent">
#{
List<NewsletterSubComponents> newsletterSubComponents = new List<NewsletterSubComponents>
{
new NewsletterSubComponents{ NewPlantArticleId = 1, NewPlantArticleName = "AAA"},
new NewsletterSubComponents{ NewPlantArticleId = 2, NewPlantArticleName = "BBB"},
new NewsletterSubComponents{ NewPlantArticleId = 3, NewPlantArticleName = "CCC"}
};
var selectList = new SelectList(newsletterSubComponents, "NewPlantArticleId", "NewPlantArticleName");
}
<!-- asp-items="New plant SelectList"-->
<select name="newsletterSubComponentIds" class="form-control Shoplist News-plant-select_1 mt-2" data-search="true" asp-items="#selectList" >
<option value="">Bitte auswählen</option>
</select>
<br />
<!-- asp-items="New plant SelectList"-->
<select name="newsletterSubComponentIds" class="form-control Shoplist News-plant-select_2 mt-2" data-search="true" asp-items="#selectList">
<option value="">Bitte auswählen</option>
</select>
<br />
<!-- asp-items="New plant SelectList"-->
<select name="newsletterSubComponentIds" class="form-control Shoplist News-plant-select_3 mt-2" data-search="true" asp-items="#selectList">
<option value="">Bitte auswählen</option>
</select>
<input type="submit" value="Speichern" class="btn btn-primary" />
</form>
Result:
here is my html.
<select id="type">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>
here is the jquery i tried but was unsuccessful.
$(document).ready(function() {
if( $("#type").val("item1"))
{
$("#size").html("<option value='test'>test</option><option value="test2">test2</option>);
}
elseif( $("#type").val("item2"))
{
$("#size").html("<option value='anothertest1'>anothertest1</option>");
}
});
basically what i'm trying to do is if an option is selected in #type then the size select is populated with options associated to it. how can i do this?
thanks
Here is an example of what you are trying to do => fiddle
$(document).ready(function () {
$("#type").change(function () {
var val = $(this).val();
if (val == "item1") {
$("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
} else if (val == "item2") {
$("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
} else if (val == "item3") {
$("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
} else if (val == "item0") {
$("#size").html("<option value=''>--select one--</option>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="type">
<option value="item0">--Select an Item--</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>
you can use data-tag in html5 and do this using this code:
<script>
$('#mainCat').on('change', function() {
var selected = $(this).val();
$("#expertCat option").each(function(item){
console.log(selected) ;
var element = $(this) ;
console.log(element.data("tag")) ;
if (element.data("tag") != selected){
element.hide() ;
}else{
element.show();
}
}) ;
$("#expertCat").val($("#expertCat option:visible:first").val());
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<select id="mainCat">
<option value = '1'>navid</option>
<option value = '2'>javad</option>
<option value = '3'>mamal</option>
</select>
<select id="expertCat">
<option value = '1' data-tag='2'>UI</option>
<option value = '2' data-tag='2'>Java Android</option>
<option value = '3' data-tag='1'>Web</option>
<option value = '3' data-tag='1'>Server</option>
<option value = '3' data-tag='3'>Back End</option>
<option value = '3' data-tag='3'>.net</option>
</select>
Here is my simple solution using Jquery filters.
$('#publisher').on('change', function(e) {
let selector = $(this).val();
$("#site > option").hide();
$("#site > option").filter(function(){return $(this).data('pub') == selector}).show();
});
JSFIDDLE
You can use switch case like this:
$(document).ready(function () {
$("#type").change(function () {
switch($(this).val()) {
case 'item1':
$("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
break;
case 'item2':
$("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
break;
case 'item3':
$("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
break;
default:
$("#size").html("<option value=''>--select one--</option>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
<option value="item0">--Select an Item--</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>
as a complementary answer to #Navid_pdp11, which will enable to select the first visible item and work on document load as well.
put the following below your body tag
<script>
$('#mainCat').on('change', function() {
let selected = $(this).val();
$("#expertCat option").each(function(){
let element = $(this) ;
if (element.data("tag") != selected){
element.removeClass('visible');
element.addClass('hidden');
element.hide() ;
}else{
element.removeClass('hidden');
element.addClass('visible');
element.show();
}
});
let expertCat = $('#expertCat');
expertCat.prop('selectedIndex',expertCat.find("option.visible:eq(0)").index());
}).triggerHandler('change');
</script>
Your if statement is setting the value. You want to compare it by doing this
if ($("#type").val() == "item1") {
...
}
daLizard is right though. You want an event handler. document.ready runs only once, when the page DOM is ready to be used.
I don't quote understand what you are trying to achieve, but you need an event listener. Something like:
$('#type').change(function() {
alert('Value changed to ' + $(this).attr('value'));
});
This will give you the value of the selected option tag.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="index">
<select name="in" onchange="myFunction()">
<option>Select One</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select id="select">
<option>Select One</option>
</select>
</form>
</body>
</html>
<script>
function myFunction(){
var x=document.index.in.value;
if(x=="One"){
document.getElementById('select').innerHTML="<option>A</option><option>Two</option>";
}
}
</script>
function showDiv(prefix, chooser) {
var selectedOption = (chooser.options[chooser.selectedIndex].value);
if (selectedOption == "2") {
var div = document.getElementById(prefix + "2");
div.style.display = 'block';
} else {
var div = document.getElementById(prefix + "2");
div.style.display = 'None';
}
}
<div class="form-label-group">
<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control">
<option value="">How can we help you?</option>
<option value="2">Support</option>
<option value="1">Feedback</option>
</select>
<div id="div2" style="display:none;">
<select id="type">
<option value="item0">--Select--</option>
<option value="item1">Technical</option>
<option value="item2">Non-Technical</option>
</select>
</div>
</div>
I have the following code segment but can not seem to capture the flipped value.
Java segment in the Head and HTML in Body:
<script>
$('#pauseslider').bind('change', function(event, data) {
if ($(this).slider().val() == 'off') {
alert($('No');
if ($(this).slider().val() == 'on') {
alert($('ON');
});
//**********************************
</script>
<div data-role="fieldcontain" data-theme="a">
<label for="pauseslider" data-theme="e">Mode</label>
<select name="pauseslider" id="pauseslider" data-role="slider" data-theme="e">
<option value="off" data-theme="a">OFF</option>
<option value="on" data-theme="a">ON</option>
</select>
</div>