Choose option through a choice previously made

Question

I’m new to Javascript and needed to know what code I can use for this situation:

For example, I have a column called "Product" which is of choice type and I wanted to select an option from that column for example "chocolate" automatically in the other column named "guy" the product type was 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 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>
<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>

Answer 2

If you have a Products table, where each record has a name and type field, 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 the other of types) you will need to have a relationship one for many. Thus, in the product table in the type field, you should have the type code. And in the onclick function you select the option between the types, referring to the type code.