Maybe someone has faced such a problem. To make the select2 widget work, I use the following code:
<link href="https://www.malketiya.com/listgrid/DropDown.css" rel="stylesheet" />
<script src="https://www.malketiya.com/listgrid/DropDown.js"> </script>
<select class="js-example-basic-single" name="state" id="selectBox0" onchange="changeFunc0();">
<option value="Alabama">Alabama</option>
<option value="Wyoming">Wyoming</option>
</select>
<script>
var selectedValue1;
var selectedValue0;
$(document).ready(function() {
$('.js-example-basic-single').select2({tags: true});
});
</script>
I can write my own tag dynamically because tags: true.
For example, I write "fff". How can I save this in a variable use OnInputEvent without click on "fff" option in the drop menu?
I will be grateful for any help.
You need make id for
<input class="select2-search__field" id="s2sf" type="search".../>
and then
$(document).on('keyup', '.select2-search__field', function (e) {
var x = document.getElementById("s2sf").value; alert(x);
});
Related
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 trying to create selected dropdown with vue JS
The code following :
<select v-model="selected"> IDR
<option value="IDR"><strong>Mata Uang</strong> </option>
<option>Rp Indonesia Rupiah</option>
<option>US$ U.S.Dolar</option>
</select>
So the question is how do i give name select tag? i try to add "IDR" but still can't show the "IDR" text
How to solve this or any suggestion about this?
The below code helps to get name and value:
var app = new Vue({
el: '#app',
data (){
return {
selected:null
}
},
methods:{
onChange(e){
console.log("name:" + document.getElementsByTagName("select")
[0].getAttribute("name") + " value:" + e.target.value )
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<select #change="onChange" v-model="selected" name="IDR">
<option value="IDR"><strong>Mata Uang</strong> </option>
<option>Rp Indonesia Rupiah</option>
<option>US$ U.S.Dolar</option>
</select>
</div>
I'm not 100% sure, wether i understand the question correct. You can add some name or ref attribute to the select either via HTML or the vue api for ref.
<select v-model="selected" name="IDR" ref="IDR">
<!-- Options -->
</select>
However, if you want to display a default option to the user then have a look at this answer.
I want to get value from select tag. So I bind a variable with v-model like below.
HTML:
<div id="action_panel">
<select id="work_type" v-model="type">
<option value="" disabled selected></option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<div>
JS:
var vm = new Vue({
el: '#action_panel',
data: {},
methods: {
addWorks: function(emp_id) {
console.log(type);
}
}
});
console.log() returns the whole html entity of select tag.
I got no clues on vue.js doc.
The type variable is never declared. You should declare it as data of your application before using it.
https://jsfiddle.net/gurghet/mwy5uLb4/
I want to add a dropzone inside an existing form but it doesn't seem to work.
When I view the console I get error throw new Error("No URL provided"). When I click upload I get no preview either - all I get is a normal file input.
<link href="../dropzone.css" rel="stylesheet">
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div class="fallback">
<input name="file" type="file" />
</div>
</div>
<div>
<button type="submit" id="submit"> upload </button>
</div>
</form>
<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
<script>
$("my-dropzone").dropzone({
url: "/file/upload",
paramName: "file"
});
</script>
No url provided error is because $("my-dropzone") is wrong instead it must be $('#mydropzone')
dropzone along with other form, yes this is very much possible, you have to post the data using the URL provided in the dropzone not in the form action. That means all your form data along with the files uploaded shall be posted back to the url provided for the dropzone. A simple untested solution is as below;
<link href="../dropzone.css" rel="stylesheet">
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div id="previewDiv></div>
<div class="fallback">
<input name="file" type="file" />
</div>
</div>
<div>
<button type="submit" id="submitForm"> upload </button>
</div>
</form>
<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
<script>
$("#mydropzone").dropzone({
url: "/<controller>/action/" ,
autoProcessQueue: false,
uploadMultiple: true, //if you want more than a file to be uploaded
addRemoveLinks:true,
maxFiles: 10,
previewsContainer: '#previewDiv',
init: function () {
var submitButton = document.querySelector("#submitForm");
var wrapperThis = this;
submitButton.addEventListener("click", function () {
wrapperThis.processQueue();
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class="yourclass"> Remove File</button>");
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
wrapperThis.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
// Also if you want to post any additional data, you can do it here
this.on('sending', function (data, xhr, formData) {
formData.append("PKId", $("#PKId").val());
});
this.on("maxfilesexceeded", function(file) {
alert('max files exceeded');
// handle max+1 file.
});
}
});
</script>
The script where you initialize dropzone can be inside $document.ready or wrap it as a function and call when you want to initialize it.
Happy coding!!
Hi I am using the connect to setup the onChange event but it is not firing - no errors being generated and I am at a loss as to what the problem is.
<select name='value(serviceRefId)' dojoType='dijit.form.FilteringSelect' id='serviceRefId'>
<option value='0'></option>
<option value='10109'>General Surgery</option>
<option value='10108'>Internal Medicine</option>
<option value='10111'>Laboratory</option>
<option value='10113'>Other</option>
<option value='10112'>Paediatrics</option>
<option value='10110'>Radiology</option>
</select>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dojo.byId("serviceRefId"), 'onChange', function(event){
alert('ok ' + event);
});
});
</script>
There is no onChange on the DOM element, which will fire. Instead there is an event in the form dijit (widget) which has that name - but you'd need to use dijit.byId to get that component.
Try this
<script type="text/javascript">
dojo.addOnLoad(function(){
// dojo.byId returns a DOMNode, not a dijit instance, replace dojo with dijit
dojo.connect(dijit.byId("serviceRefId"), 'onChange', function(event){
alert('ok ' + event);
});
});
</script>