Am new to Aurelia Js , here, am using a simple select box but its not working while changing the value.
HTML :
<select value.bind="selectVal" change.delegate="changed()">
<option value="" disabled selected>Doc.Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Model :
this.selectVal = '';
changed(){
alert();
}
change.delegate is not triggering while change the value. Also, datepicker value is not loading in the model. What will be the issue? Is it any from my end or form Aurelia js issue.
When using Materialize (as became apparent from the comments of the original questions) the select element won't fire any change event. You would have to listen to the jQuery change event and fire a CustomEvent in the event handler.
Like this:
_suspendUpdate = false;
attached() {
$(this.option).material_select()
$(this.option).on('change', e => {
if (!this._suspendUpdate) {
let customEvent = new CustomEvent('change', {});
this._suspendUpdate = true;
this.option.dispatchEvent(customEvent);
this._suspendUpdate = false;
}
});
}
Note: the suspendUpdate "trick" is needed because a change CustomEvent also causes jQuery to fire its own change event which causes an infinite loop.
The view template for the snippet above:
<template>
<require from="materialize/dist/css/materialize.css"></require>
<div class="input-field col s12">
<select ref="option" value.bind="optionSelect">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<p>Selected value: ${optionSelect}</p>
</div>
</template>
Here is also a gist.run which demonstrates this approach:
https://gist.run/?id=4e7dd11228407e765844570409d210bd
Of course if you're using Materialize with Aurelia, you can also use the Materialize bridge: http://aurelia-ui-toolkits.github.io/demo-materialize/#/about
Disclaimer: I'm one of the creators of Aurelia Materialize bridge.
Related
I have two select option fields--one with the ID of determined and the other vehicle_type. Determined has 4 options--2 of which should disable the options in the vehicle_type select field. In the console, I see the disabled attribute being added, but because of Livewire, is immediately removed. Any way of persisting my changes and force Livewire not to send updates to the server?
<select wire:model="determined" id="determined"
name="determined">
<option selected value>Please Select</option>
<option value="0">Published HP Figure (DIN)</option>
<option value="1">Measured with Dynojet+Dyno</option>
<option value="2">Measured with Mustang Dyno</option>
<option value="3">Measured with Engine Dynamometer Cell</option>
</select>
<select wire:model="vehicle_type" id="vehicle_type"
name="vehicle_type">
<option selected value>Please Select</option>
<option value="0">Stick shift and 2WD vehicle</option>
<option value="1">Automatic or 4WD Drive</option>
</select>
#push('scripts')
$(document).ready(function() {
$('#determined').on("change", function() {
const dis = $(this).val() == 0 || $(this).val() == 3;
$("#vehicle_type option").prop("disabled",dis)
});
});
#endpush
Use .defer on the wire:model to prevent Livewire from making an ajax request immediately and re-render the component.
<select wire:model.defer="determined" id="determined" name="determined">
<option selected value>Please Select</option>
<option value="0">Published HP Figure (DIN)</option>
<option value="1">Measured with Dynojet+Dyno</option>
<option value="2">Measured with Mustang Dyno</option>
<option value="3">Measured with Engine Dynamometer Cell</option>
</select>
I have a drop down like following,
<select id="role" class="form-control" th:field="*{role}" >
<option th:field="*{role}" value="USER">USER</option>
<option selected th:field="*{role}" value="ADMIN" >ADMIN</option>
<option th:field="*{role}" value="SUPERUSER">SUPERUSER</option>
</select>
I want default option as ADMIN. For that i added selected inside option tag. but default option still pointing to USER. Can anyone help me o solve this. Thanks
Set the value of "role" to "ADMIN" in your controller (in the java), before the page is rendered.
Also, you don't need all those extra th:field attributes. th:field should only appear on the select.
<select id="role" class="form-control" th:field="*{role}" >
<option value="USER">USER</option>
<option value="ADMIN" >ADMIN</option>
<option value="SUPERUSER">SUPERUSER</option>
</select>
I did something like following to get it working.
<script th:inline="javascript">
/*<![CDATA[*/
window.addEventListener("DOMContentLoaded", function() {
var optionSelected = [[${product.role}]];
if(optionSelected == null){
$("#role").val("ADMIN");
}
});
/*]]>*/
</script>
and removed the selected attribute from the option.
I have three dropdowns with same class name:
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I want to change any of these dropdown values based on any other dropdrop selected. If I select option two from second dropdown - I want 1st and 3rd dropdown values to be two. All these dropdown should change values no matter which one I select.
Thanks.
You will need JavaScript to do this. Here is an code example using jQuery:
$('.MyClass').on('change',function(){
$('.MyClass').val( $(this).val() );
});
This will add an EventListeneer for the change Element and update all DropDowns to the value of the changed one.
http://jsfiddle.net/CWP7Q/
you can use jQuery or normal JS, but my example contains Jquery, which will give you an idea. Please check the example in Jsfiddle.
The example binds a change event to the class name of the three selectors:
$(".MyClass").change(function(){
$(".MyClass").val($(this).val());
});
and Voila, every selector gets changed.
Somehting like (with jQuery)
$('.MyClass').change(function() {
$('.MyClass').val($(this).val());
});
<form method="post">
<select name="users" id="users" onchange="showUser(this.value)" value="">
<option value="">Select a person:</option>
<option value="1" onchange="copy();">tcs</option>
<option value="2" onchange="copy();">wipro</option>
<option value="3" onchange="copy();">Hcl</option>
<option value="4" onchange="copy();">krystal kones</option>
</select>
</form>
I have this drop down i want that when the value is changed like tcs,wipro or hcl then that value should shown in html label
Try putting the onChange attribute in the select tag.
Example: http://jsfiddle.net/r6Fus/
HTML:
<div id="label"></div>
<select id="mySelect" onchange="copy();">
<option value="">Select a person:</option>
<option value="tcs" >tcs</option>
<option value="wipro" >wipro</option>
<option value="Hcl" >Hcl</option>
<option value="krystal kones" >krystal kones</option>
</select>
Javascript:
function copy() {
document.getElementById("label").innerHTML = document.getElementById("mySelect").value
}
Otherwise you could use jQuery.
First of all, the onchange event is for the select element, not the option elements. Those don't actually change. Also, you have two JavaScript functions. showUser() and copy(). But you describe only one piece of functionality. What do these two functions do?
As for showing the text in the label, here's one way to do it (using jQuery, because everybody does):
$(document).ready(function() {
$('#users').change(function() {
$('#myLabel').text($(this).val());
});
});
What this is basically doing is:
Wait until the DOM is loaded and ready.
Bind a function to the change event of the specified select element.
The function contains one line, which sets the text of the specified label to the value of the select.
Sorry guys, I should have posted the script directly without cleaning it. Please check the updated script, it should now clear things up. Thanks!
Consider the following JavaScript :
var selected = 0;
var options = 0;
$('.newListSelected').each(function() {
selected = $(this).children('.selectedTxt');
selected = selected.text();
/* Everything before this line works completely fine */
options = $(this).prev();
options.find('option[value=' +selected+ ']').attr('selected', 'selected');
}).remove();
And HTML :
<select name="type[]" style="display: none;">
<optgroup>
<option value="none">Select</option>
</optgroup>
<optgroup label="First Group">
<option value="1">One</option>
<option value="2">Two</option>
</optgroup>
<optgroup label="Second Group">
<option value="10">Ten</option>
<option value="20">Twenty</option>
</optgroup>
</select>
<div class="newListSelected">
<div class="selectedTxt">20</div>
<ul class="newList">
<!-- Other stuff here -->
</ul>
</div>
What I'm trying to do actually is adding the selected attribute to the corresponding select option that has the same value as the text in .selectedTxt. In the code above, it should add selected="selected" to <option value="20">Twenty</option>.
However its not performing as expected, I also tried adding alert(option); below prev(); but it didn't output anything useful.
Thanks.
The Javascript works fine, as can be seen here: http://jsfiddle.net/4HsXp/
If you need to be able to select multiple items in a select element, you need to set the multiple and size attribute, like this:
<select multiple="multiple" size="2">
<option>1</option>
<option>2</option>
</select>
See: http://reference.sitepoint.com/html/select
Edit:
Attaching console.log statements to the new code still does not any problem. Running it on jsfiddle gave me the correct output:
jQuery(select)
Original Value: none
New Value: 20
I'm not sure what you are trying to do, but why couldn't you just select all option elements with proper selectors? If you want to select only some options, then you have to add extra selector attrbiutes.
$('select option').each(function() {
$(this).attr('selected', 'selected');
});