javascript - 具有相同名称的多个选择输入 Laravel

Question

所以我遇到了这个问题，我想使用多个同名的选择输入将数据存储到数据库中。

为此我做了不同的选择输入，第一个将根据选择的选项显示其余部分，例如(这只是一个例子，不是我的真实代码):

主要选择输入将是这样的:

<select name="users" required>
     <option value="user_one">Mike</option>
     <option value="user_two">Pablo</option>
</select>

当我们选择上面的一些选项时，比如 Mike，它会显示另一个选择输入:

<select name="lang_specif[]" required>
     <option value="php">php</option>
     <option value="python">python</option>
     <option value="js">js</option>
</select>

如果我们选择 Pablo，它将显示另一个选择输入:

<select name="lang_specif[]" required>
     <option value="php">php</option>
     <option value="python">python</option>
     <option value="js">js</option>
</select>

问题是，它们都具有相同的名称，并且在提交时返回一个数组，

在我的真实代码中，我有多个选择输入，这取决于所选的选项，它会显示一个或另一个，我不能使用不同的名称，因为它会导致我向数据库添加 12 列，如果我可以访问它并获取已提交的实际值它只需要我 2.

Answer 1

<form>
<select name="users" required>
     <option value="user_one">Mike</option>
     <option value="user_two">Pablo</option>
</select>


<!-- Select 1 -->
<select name="lang_specif[]" class="hidden">
     <option value="php">php</option>
     <option value="python">python</option>
     <option value="js">js</option>
</select>

<!-- Select 2 -->
<select name="lang_specif[]" required>
     <option value="php">php</option>
     <option value="python">python</option>
     <option value="js">js</option>
</select>

<input type="submit" />
</form>

您可以通过检查其中哪些是隐藏的来区分它们:

let form = document.querySelector('form');
let userSelect = document.querySelector('[name="users"]');

form.addEventListener('submit', function() {
    let user = userSelect.value
    let lang_specif = document.querySelector('[name="lang_specif[]"]:not(.hidden) option:selected').value;
    if (lang_specif === null) {
        // error
    }
}

userSelect.addEventListener('change', function(evt) {
    let select = document.getElementsByName('lang_specif[]')[evt.target.selectedIndex]
    select.classList.remove('hidden')
    select.required = true

    let notSelect = document.getElementsByName('lang_specif[]')[!evt.target.selectedIndex]
    notSelect.classList.add('hidden')
    notSelect.removeAttribute('required')
})

.hidden {
    display: none;
}