Choose option through a choice made previously

Question

Choose option through a choice made previously

Navigation

#1 by (2 votes)
#2 by (1 votes)

7

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 the type choice and I wanted to select an option from that column for example "chocolate" automatically in the other column named "type" would be placed the product type in this case "sweets" .

<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>

javascript

asked by anonymous 20.11.2015 / 11:42

2 answers

How to make a dynamic form? How to retrieve the number of characters via regular expression?

score 2 · Answer 1

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><scriptsrc="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>

score 1 · Answer 2

If you have a Products table, where each record has a field name and type, and the type field is just a text field (not selection), you can do this:

var lista = document.getElementById('produtos').getElementsByTagName('li');

lista = [].slice.call(lista); // lista é um HtmlCollection, para podermos iterar temos de transformá-lo em um array
  
lista.forEach(function(item) {
  var produto_radio = item.getElementsByTagName('input')[0];
  var produto_nome = produto_radio.value;
  var produto_tipo = item.getElementsByClassName('tipo')[0].innerHTML;
  var tipo_target = document.getElementById('tipo_target');
  produto_radio.onclick = function() {
    tipo_target.innerHTML = produto_tipo;
  };
});

<ul style="list-style-type: none;" id="produtos">
  <li>
    <input type="radio" name="produto" value="Chocolate">Chocolate
    <span class="tipo" style="display:none;">Doces</span>
  </li>
  <li>
    <input type="radio" name="produto" value="Detergente">Detergente
    <span class="tipo" style="display: none;">Produtos de Limpeza</span>
  </li>
</ul>

<h2 id="tipo_target">Selecione um produto</h2>

But if you want to relate two tables (one of products and one of types) you will have to have a one-to-many relationship. So, in the Products table in the Type field, you should have the type code. And in the onclick function you select the option between types, referring to the type code.