Question:
I'm new to JavaScript and I needed to know what code I can use for this situation:
For example, I have a column called "Product" which is of type choice and I wanted that when selecting an option from this column for example "chocolate" automatically in the other column called "type" the type of the product would be placed in this case "candy" .
<script type = "text/javascript">
document.getElementById('id').style.display = 'none';
function NovaFuncaoDespesas()
{
var Despesas = document.getElementById('id') ;
var Rubrica = document.getElementById('Rubrica');
var rubrica=Rubrica.options[Rubrica.selectedIndex].text;
if(rubrica=="Ativos Tangíveis Específicos")
{
Despesas.options[1].disabled=true;
}
if(rubrica!="Ativos Tangíveis Específicos")
}
</script>
Answer:
You could use KnockoutJS to do this.
var tipoProduto = [{ id: 1, descricao: "Frutas" }, { id: 2, descricao: "Produto de Limpeza" }, { id: 3, descricao: "Carnes" }]; var produtos = [{ nome: "Banana", tipo: 1 }, { nome: "Maça", tipo: 1 }, { nome: "Sabão em pó", tipo: 2 }, { nome: "Alcatra", tipo: 3 }, { nome: "Frango", tipo: 3 }, { nome: "Porco", tipo: 3 }]; var ViewModel = function() { var self = this; //inicializa as listas com a data(pode ser dados carregados através de um serviço self.produtos = ko.mapping.fromJS(produtos); self.tipoProduto = ko.mapping.fromJS(tipoProduto); self.tipoSelecionado = ko.observable(); self.produtosFiltrados = ko.computed(function() { return ko.utils.arrayFilter(self.produtos(), function(i) { if (self.tipoSelecionado() == undefined) return; return i.tipo() == self.tipoSelecionado(); }); }); } var viewModel = new ViewModel(); ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> <select data-bind="options:tipoProduto, optionsValue: 'id',optionsText:'descricao', optionsCaption:'Selecione um tipo de produto',value:$root.tipoSelecionado"></select> <select data-bind="options:$root.produtosFiltrados(), optionsText:'nome'"></select>