Come aggiungere valori al tag <option> caricato dall'array

Question

Ho un modulo in più parti per caricare le opzioni di colore in base alla selezione della dimensione, tuttavia non aggiungerà valori al tag dell'opzione e non riesco a trovare la soluzione. Quello che vorrei è.

1. Per aggiungere valori all'esempio tag opzione:

   option value = "X"> Cancella, option value = "T"> Fumo, option value = "GS"> Gunsmoke

2. Emette come html il testo delle opzioni selezionate in modo da poter mostrare al client le loro selezioni in un formato leggibile prima di inviare il passaggio finale.

Qualsiasi aiuto sarebbe molto apprezzato. Grazie

My Code

var Vest_10_08 = new Array("Select Color", "Clear", "Smoke", "Gunsmoke"); 
 
var Vest_10_10 = new Array("Select Color", "Clear", "Smoke", "Gunsmoke"); 
 
var Vest_10_12 = new Array("Select Color", "Clear", "Smoke", "Gunsmoke"); 
 
var Vest_10_14 = new Array("Select Color", "Clear", "Smoke"); 
 
var Vest_10_16 = new Array("Select Color", "Clear", "Smoke"); 
 

 
$(document).ready(function() { 
 
    //Populate Select Items 
 

 
    $('#SelectSize').change(function() { 
 
     populateSelect(), populatePart();; 
 
    }); 
 
    $('#SelectHardware').change(function() { 
 
     populatePart(); 
 
    }); 
 
    $('#SelectColor').change(function() { 
 
     populatePart(); 
 
    }); 
 

 
    function populateSelect() { 
 
     SelectSize = $('#SelectSize').val(); 
 
     $('#SelectColor').html(''); 
 

 
     eval(SelectSize).forEach(function (t) { 
 
      $('#SelectColor').append('<option>' + t + '</option>'); 
 
     }); 
 

 
    } 
 

 
    function populatePart() { 
 
     SelectSize = $('#SelectSize').val(); 
 
     SelectHardware = $('#SelectHardware').val(); 
 
     SelectColor = $('#SelectColor').val(); 
 
     document.getElementById('item_name').value = (SelectSize + '66' + SelectHardware + SelectColor) 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<select id="SelectSize" name="SelectSize" required=""> 
 
    <option selected="selected">Select Size</option> 
 
    <option value="Vest_10_08">10 tall X 14 wide</option> 
 
    <option value="Vest_10_10">14 tall X 14 wide</option> 
 
    <option value="Vest_10_12">16 tall X 14 wide</option> 
 
    <option value="Vest_10_14">16 tall X 16 wide</option> 
 
    <option value="Vest_10_16">18 tall X 16 wide</option> 
 
</select> 
 
<br> 
 
<br> 
 
<select id="SelectHardware" name="SelectHardware" required=""> 
 
    <option selected="selected">Select Hardware</option> 
 
    <option value="C">Chrome</option> 
 
    <option value="SB">Black</option> 
 
</select> 
 
<br> 
 
<br> 
 
<select id="SelectColor" name="SelectColor" required=""></select> 
 
<br> 
 
<br> 
 
<input id="item_name" name="item_name" type="text" style="width: 200px" />

Answer 1

Prima di tutto, è generalmente considerata una cattiva pratica da utilizzare eval in generale. Una buona riscrittura potrebbe utilizzare gli oggetti per memorizzare i valori anziché utilizzare variabili con nome individuale. È inoltre possibile utilizzare oggetti per memorizzare il valore e visualizzare le proprietà.

qualcosa di simile ...

var vestData = { 
    'Vest_10_08':[ 
     { 
      value:'', 
      text:'Select Color' 
     }, 
     { 
      value:'S', 
      text:'Smoke' 
     }, 
     { 
      value:'GS', 
      text:'Gun Smoke' 
     } 
    ], 
    'Vest_10_10':[ 
     // ... 
    ] 
}; 

Tuttavia, dal momento che si dispone di elementi duplicati con gli stessi valori che si potrebbe desiderare un oggetto master per fare riferimento ai valori interni ai valori visualizzati come questo.

var colorNames = { 
    'C':'Clear', 
    'S':'Smoke', 
    'GS':'Gun Smoke' 
} 

var colorOptions = { 
    'Vest_10_08':['C','S','GS'], 
    'Vest_10_10':['C','S','GS'], 
    'Vest_10_12':['C','S','GS'], 
    'Vest_10_14':['C','S'], 
    'Vest_10_16':['C','S'] 
}; 

$(document).ready(function() { 
    //Populate Select Items 

    $('#SelectSize').change(function() { 
     populateSelect(), populatePart();; 
    }); 
    $('#SelectHardware').change(function() { 
     populatePart(); 
    }); 
    $('#SelectColor').change(function() { 
     populatePart(); 
    }); 

    function populateSelect() { 
     SelectSize = $('#SelectSize').val(); 
     $('#SelectColor').html('<option value="">Select Color</option>'); 

     colorOptions[SelectSize].forEach(function (t) { 
      $('#SelectColor').append('<option value="' + t + '">' + colorNames[t] + '</option>'); 
     }); 

    } 

    function populatePart() { 
     SelectSize = $('#SelectSize').val(); 
     SelectHardware = $('#SelectHardware').val(); 
     SelectColor = $('#SelectColor').val(); 
     document.getElementById('item_name').value = (SelectSize + '66' + SelectHardware + SelectColor) 

    } 
}); 

Answer 2

È necessario modificare gli array per calcolare oggetti invece di stringhe. Ad esempio:

var Vest_10_08 = [ 
    { value: '', text: "Select Color" }, 
    { value: 'X', text: "Clear" }, 
    { value: 'T', text: "Smoke" }, 
    { value: 'GS', text: "Gunsmoke" } 
]; 

E poi, quando si sta scorrendo l'Array:

$('#SelectColor').append('<option value="' + t.value + '">' + t.text + '</option>'); 

---

Nota: Niente a che vedere con la domanda, ma solo un suggerimento: non credo è una buona idea usare eval, come si sta facendo. Potresti semplicemente usare un oggetto keyvaluepair, e poi useresti l'ID come chiave. Per esempio:

var vests = { 
    Vest_10_08: [ 
    { value: '', text: "Select Color" }, 
    { value: 'X', text: "Clear" }, 
    { value: 'T', text: "Smoke" }, 
    { value: 'GS', text: "Gunsmoke" } 
    ], 
    Vest_10_10: [ 
    /* (...) */ 
    ] 
}; 

E poi si potrebbe usare, invece di utilizzare eval, facendo:

vests[SelectSize].forEach(

Answer 3

var Vest_10_08 = new Array({name: "Select Color", option: 0}, {name: "Clear", option: "X"}, {name: "Smoke", option: "T"}, {name: "Gunsmoke", option: "GS"}); 
 

 
var Vest_10_10 = new Array({name: "Select Color", option: 0}, {name: "Clear", option: "X"}, {name: "Smoke", option: "T"}, {name: "Gunsmoke", option: "GS"}); 
 

 
var Vest_10_12 = new Array({name: "Select Color", option: 0}, {name: "Clear", option: "X"}, {name: "Smoke", option: "T"}, {name: "Gunsmoke", option: "GS"}); 
 

 
var Vest_10_14 = new Array({name: "Select Color", option: 0}, {name: "Clear", option: "X"}, {name: "Smoke", option: "T"}); 
 

 
var Vest_10_16 = new Array({name: "Select Color", option: 0}, {name: "Clear", option: "X"}, {name: "Smoke", option: "T"}); 
 

 

 
$(document).ready(function() { 
 
     //Populate Select Items 
 

 
     $('#SelectSize').change(function() { 
 
      populateSelect(); 
 
      populatePart(); 
 
     }); 
 
     $('#SelectHardware').change(function() { 
 
      populatePart(); 
 
     }); 
 
     $('#SelectColor').change(function() { 
 
      populatePart(); 
 
     }); 
 

 
     function populateSelect() { 
 
      SelectSize = $('#SelectSize').val(); 
 
      $('#SelectColor').html(''); 
 
      eval(SelectSize).forEach(function (t) { 
 
       $('#SelectColor').append('<option value=' + t.option + '>' + t.name + '</option>'); 
 
      }); 
 
     } 
 

 
     function populatePart() { 
 
      SelectSize = $('#SelectSize').val(); 
 
      SelectHardware = $('#SelectHardware').val(); 
 
      SelectColor = $('#SelectColor').val(); 
 
      document.getElementById('item_name').value = (SelectSize + '66' + SelectHardware + SelectColor) 
 

 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="SelectSize" name="SelectSize" required=""> 
 
    <option selected="selected">Select Size</option> 
 
    <option value="Vest_10_08">10 tall X 14 wide</option> 
 
    <option value="Vest_10_10">14 tall X 14 wide</option> 
 
    <option value="Vest_10_12">16 tall X 14 wide</option> 
 
    <option value="Vest_10_14">16 tall X 16 wide</option> 
 
    <option value="Vest_10_16">18 tall X 16 wide</option> 
 
</select> 
 
<br> 
 
<br> 
 
<select id="SelectHardware" name="SelectHardware" required=""> 
 
    <option selected="selected">Select Hardware</option> 
 
    <option value="C">Chrome</option> 
 
    <option value="SB">Black</option> 
 
</select> 
 
<br> 
 
<br> 
 
<select id="SelectColor" name="SelectColor" required=""></select> 
 
<br> 
 
<br> 
 
<input id="item_name" name="item_name" type="text" style="width: 200px" />

Answer 4

basta mettere la dettaglio colori all'interno di un altro oggetto.È necessario non duplicare ogni valore i colori all'interno di tutti "Vest_10_ *"

var Vest_10_08 = new Array("Select Color", "Clear", "Smoke", "Gunsmoke"); 
 
var Vest_10_10 = new Array("Select Color", "Clear", "Smoke", "Gunsmoke"); 
 
var Vest_10_12 = new Array("Select Color", "Clear", "Smoke", "Gunsmoke"); 
 
var Vest_10_14 = new Array("Select Color", "Clear", "Smoke"); 
 
var Vest_10_16 = new Array("Select Color", "Clear", "Smoke"); 
 

 
//New added 
 
var Colors = {}; 
 
Colors['Select Color'] = '0'; 
 
Colors['Clear'] = 'X'; 
 
Colors['Smoke'] = 'T'; 
 
Colors['Gunsmoke'] = 'GS'; 
 

 
$(document).ready(function() { 
 
\t //Populate Select Items 
 

 
\t $('#SelectSize').change(function() { 
 
\t \t populateSelect(), populatePart();; 
 
\t }); 
 
\t $('#SelectHardware').change(function() { 
 
\t \t populatePart(); 
 
\t }); 
 
\t $('#SelectColor').change(function() { 
 
\t \t populatePart(); 
 
\t }); 
 

 
\t function populateSelect() { 
 
\t \t SelectSize = $('#SelectSize').val(); 
 
\t \t $('#SelectColor').html(''); 
 

 
\t \t //Changes in this function 
 
\t \t eval(SelectSize).forEach(function (t) { 
 
\t \t \t console.log(t); 
 
\t \t \t var value = Colors[t]; 
 
\t \t \t console.log(value); 
 
\t \t \t $('#SelectColor').append('<option value="'+value+'">' + t + '</option>'); 
 
\t \t }); 
 

 
\t } 
 

 
\t function populatePart() { 
 
\t \t SelectSize = $('#SelectSize').val(); 
 
\t \t SelectHardware = $('#SelectHardware').val(); 
 
\t \t SelectColor = $('#SelectColor').val(); 
 
\t \t document.getElementById('item_name').value = (SelectSize + '66' + SelectHardware + SelectColor) 
 

 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<select id="SelectSize" name="SelectSize" required=""> 
 
    <option selected="selected">Select Size</option> 
 
    <option value="Vest_10_08">10 tall X 14 wide</option> 
 
    <option value="Vest_10_10">14 tall X 14 wide</option> 
 
    <option value="Vest_10_12">16 tall X 14 wide</option> 
 
    <option value="Vest_10_14">16 tall X 16 wide</option> 
 
    <option value="Vest_10_16">18 tall X 16 wide</option> 
 
</select> 
 
<br> 
 
<br> 
 
<select id="SelectHardware" name="SelectHardware" required=""> 
 
    <option selected="selected">Select Hardware</option> 
 
    <option value="C">Chrome</option> 
 
    <option value="SB">Black</option> 
 
</select> 
 
<br> 
 
<br> 
 
<select id="SelectColor" name="SelectColor" required=""></select> 
 
<br> 
 
<br> 
 
<input id="item_name" name="item_name" type="text" style="width: 200px" />

Se si vuole evitare "eval" di codice è qui: http://jsfiddle.net/bhushankumar/0b4azsuf/2/

Answer 5

utilizzare un modello libary come underscore o manubri o baffi. È una cattiva pratica generare HTML da javascript.