Good afternoon guys, I would like to know if it is possible in a form to create a combobox with options to select in checkBox and text box to populate with a value. (According to image) and then I can send the selected item with the respective value. I would like some example if possible.
Thank you!
It is possible, yes, you can have the combobox activated when a checkbox is selected. And when the combobox changes its value the same can be assigned to the checkbox, as follows:
var checkbox = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].addEventListener('change', function() {
var input = this,
select = this.parentElement.nextElementSibling;
input.value = select.value;
select.disabled = !this.checked;
select.onchange = function() {
input.value = this.value;
}
});
}<form>
<div>
<label>
<span>IPhone</span>
<input type="checkbox">
</label>
<select disabled>
<option value="1">Valor 1</option>
<option value="2">Valor 2</option>
<option value="3">Valor 3</option>
</select>
</div>
</form> I particularly love Vue.js .
With it you can leave the rendering dynamics of html in real time. This example automates the process of displaying content.
Now you just need to receive this data from an API without having to worry about changing the html document every time your database or API add a new product.
var app = new Vue({
el: '#check',
data: {
checks: [
{label: 'APPLE' , values: ['IPHONE' , 'IPAD'] , check:false},
{label: 'LG' , values: ['TVs' , 'SMARTPHONES'] , check:false}
]
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script><divid="check">
<div v-for="check in checks" >
<label >{{check.label}}</label>
<input type="checkbox" v-on:click="check.check = check.check == false ? true : false">
<select v-if="check.check">
<option v-for="value in check.values " v-bind:value="value" >{{value}}
</select>
</div>
</div>