Javascript 创建表时无法更改变量

人们！请帮忙

我有一张表格。我需要-如果我得到一个值，比如-organization 1，我想在form-function getAttr之后创建一个表代码，并将变量bigBoss、gap和sme从0更改为var bigBoss=Steve、var gap=Mary、var sme=Anastasia。我需要创建一个具有该名称的表，但如果我选择organization 2，我需要什么样的bigBoss、gap和sme将是James、Richard和Mike

我该怎么做？救命啊

<div class = "nameOfOrganization">
<label>2. Choose organization:</label>

<form>
<select name = "organizations" id="organizations" style="text-transform:   uppercase; width: 312px;">
<option>organization 1</option>
<option>organization 2</option>
<option>organization 3</option>
</select>
</form>
<button type="button" onclick="getOrganizationName()">Add to document:      </button>

<script>

function getOrganizationName () {
var x = document.getElementById("organizations");
var y = x.options[x.selectedIndex].text;

document.getElementById("organizationName").innerHTML = y;

getAttr(); // add a table with bigBoss, gap and sme

}
</script>
<script>

function getAttr() {
var bigBoss = 0 ;
var gap = 0;
var sme = 0;

var podpisi = document.createElement('table');
var tr = document.createElement('tr');
var td = document.createElement('td');
var position = document.createTextNode('Boss');
tr.appendChild(td);
td.appendChild(position);
var td1 = document.createElement('td');
var signature = document.createTextNode(" " + '_____________');
tr.appendChild(td1);
td1.appendChild(signature);
var td2 = document.createElement('td');
var bigBoss_surname_Name_MiddleName = document.createTextNode(bigBoss);
tr.appendChild(td2);
td2.appendChild(bigBoss_surname_Name_MiddleName);
podpisi.appendChild(tr);
podpisi.id="podpisi";
td.className = "td1";
td1.className = "td2";
td2.className = "td3";


var tr2 = document.createElement('tr');
var td2_1 = document.createElement('td');
var position1 = document.createTextNode('Кошторис перевірив');
tr2.appendChild(td2_1);
td2_1.appendChild(position1);
var td2_2 = document.createElement('td');
var signature1 = document.createTextNode(" " + '_____________');
tr2.appendChild(td2_2);
td2_2.appendChild(signature1);
var td2_3 = document.createElement('td');
var GAP_surname_Name_MiddleName = document.createTextNode(gap);
tr2.appendChild(td2_3);
td2_3.appendChild(GAP_surname_Name_MiddleName);
podpisi.appendChild(tr2);
td2_1.className = "td1";
td2_2.className = "td2";
td2_3.className = "td3";



var tr3 = document.createElement('tr');
var td3_1 = document.createElement('td');
var position2 = document.createTextNode('Кошторис cклав:');
tr3.appendChild(td3_1);
td3_1.appendChild(position2);
var td3_2 = document.createElement('td');
var signature2 = document.createTextNode(" " + '_____________');
tr3.appendChild(td3_2);
td3_2.appendChild(signature2);
var td3_3 = document.createElement('td');
var smetchik_surname_Name_MiddleName = document.createTextNode(sme);
tr3.appendChild(td3_3);
td3_3.appendChild(smetchik_surname_Name_MiddleName);
podpisi.appendChild(tr3);
td3_1.className = "td1";
td3_2.className = "td2";
td3_3.className = "td3";

试试这个：

<select name = "organizations" id="organizations" style="text-transform:   uppercase; width: 312px;">
<option data-bigBoss="Steve" data-gap="Mary" data-sme="Anastasia">organization 1</option>
<option data-bigBoss="James" data-gap="Richard" data-sme="Mike">organization 2</option>
<option data-bigBoss="Someone" data-gap="Another one" data-sme="Somebody">organization 3</option>
</select>

给你：

<div class="nameOfOrganization">
    <label>2. Choose organization:</label>

    <form>
        <select name="organizations" id="organizations" style="text-transform:   uppercase; width: 312px;">
            <option value="0">organization 1</option>
            <option value="1">organization 2</option>
            <option value="2">organization 3</option>
        </select>

        <div id="organizationName"></div>

    </form>
    <button type="button" onclick="getOrganizationName()">Add to document: </button>

    <script>
        var names = [{
            bigBoss: 'Steve',
            gap: 'Mary',
            sme: 'Anastasia'
        }, {
            bigBoss: 'John',
            gap: 'Jane',
            sme: 'JJ'
        }, {
            bigBoss: 'Amy',
            gap: 'Adam',
            sme: 'AJ'
        }];

        function getOrganizationName() {
            var x = document.getElementById("organizations");
            var y = x.options[x.selectedIndex].text;

            document.getElementById("organizationName").innerHTML = y;

            getAttr(+x.options[x.selectedIndex].value); // add a table with bigBoss, gap and sme

        }
    </script>
    <script>
        function getAttr(idx) {
            var bigBoss = 0;
            var gap = 0;
            var sme = 0;

            var podpisi = document.createElement('table');
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var position = document.createTextNode('Boss');
            tr.appendChild(td);
            td.appendChild(position);
            var td1 = document.createElement('td');
            var signature = document.createTextNode(names[idx].bigBoss);
            tr.appendChild(td1);
            td1.appendChild(signature);
            var td2 = document.createElement('td');
            var bigBoss_surname_Name_MiddleName = document.createTextNode(bigBoss);
            tr.appendChild(td2);
            td2.appendChild(bigBoss_surname_Name_MiddleName);
            podpisi.appendChild(tr);
            podpisi.id = "podpisi";
            td.className = "td1";
            td1.className = "td2";
            td2.className = "td3";


            var tr2 = document.createElement('tr');
            var td2_1 = document.createElement('td');
            var position1 = document.createTextNode('Кошторис перевірив');
            tr2.appendChild(td2_1);
            td2_1.appendChild(position1);
            var td2_2 = document.createElement('td');
            var signature1 = document.createTextNode(names[idx].gap);
            tr2.appendChild(td2_2);
            td2_2.appendChild(signature1);
            var td2_3 = document.createElement('td');
            var GAP_surname_Name_MiddleName = document.createTextNode(gap);
            tr2.appendChild(td2_3);
            td2_3.appendChild(GAP_surname_Name_MiddleName);
            podpisi.appendChild(tr2);
            td2_1.className = "td1";
            td2_2.className = "td2";
            td2_3.className = "td3";



            var tr3 = document.createElement('tr');
            var td3_1 = document.createElement('td');
            var position2 = document.createTextNode('Кошторис cклав:');
            tr3.appendChild(td3_1);
            td3_1.appendChild(position2);
            var td3_2 = document.createElement('td');
            var signature2 = document.createTextNode(names[idx].sme);
            tr3.appendChild(td3_2);
            td3_2.appendChild(signature2);
            var td3_3 = document.createElement('td');
            var smetchik_surname_Name_MiddleName = document.createTextNode(sme);
            tr3.appendChild(td3_3);
            td3_3.appendChild(smetchik_surname_Name_MiddleName);
            podpisi.appendChild(tr3);
            td3_1.className = "td1";
            td3_2.className = "td2";
            td3_3.className = "td3";

            var div = document.getElementById("organizationName");
            div.appendChild(podpisi);
        }
    </script>

这两行将实际表添加到html正文中：

        var div = document.getElementById("organizationName");
        div.appendChild(podpisi);

---

首先，您必须解释James、Richard和Mike来自何处——它们不在您的代码中。您不能使用array/json对象来存储组织数据吗？比如：Organizations=[organization1:{bigBoss:'X'，…}，organization2:{bigBoss:'Y'}]。。。我还不知道Json。James，Richard和Mike我想要的是bigBoss=James，gap=Richard和sme=Mike。在代码中有一个变量。但我不能改变它，当我接受组织2银行！它起作用了。但我有一个问题。什么是idx？我首先在getAttr函数中看到它，在括号内，然后在创建表podpisi时看到它。我看到您在数组中创建对象，然后在getAttr函数中将数组附加到表单中。但我不明白idx是什么。@DeniWassulmaier-idx是所选选项的值+x、 选项[x.selectedIndex]。非常感谢，但将回答我的问题。

    <div id="organizationName"></div>

 var names = [{
                bigBoss: 'Steve',
                gap: 'Mary',
                sme: 'Anastasia'
            }, {
                bigBoss: 'John',
                gap: 'Jane',
                sme: 'JJ'
            }, {
                bigBoss: 'Amy',
                gap: 'Adam',
                sme: 'AJ'
            }];

        var div = document.getElementById("organizationName");
        div.appendChild(podpisi);