如何通过id获取<select>的值？

Posted 2023-02-24

【中文标题】如何通过id获取<select>的值？

【英文标题】：How to get the value of <select> through id?

【发布时间】：2018-02-15 21:09:32

【问题描述】：

对于一个项目，我必须制作一个表格，您可以对其进行实时编辑、删除等操作。

现在我遇到问题的代码部分是：

$('#add').click(function()
    
        var html  = '<tr>';
            html += '<td contenteditable id="data1"><select><option value="s">S</option><option value="a">A</option><option value="p">P</option><option value="v">V</option><option value="ü">Ü</option></select></td>';
            html += '<td contenteditable id="data2"></td>';
            html += '<td contenteditable id="data3"></td>';
            html += '<td contenteditable id="data4"></td>';
            html += '<td contenteditable id="data5"></td>';
            html += '<td contenteditable id="data6"></td>';
            html += '<td contenteditable id="data7"></td>';
            html += '<td contenteditable id="data8"></td>';
            html += '<td contenteditable id="data9"></td>';
            html += '<td contenteditable id="data10"></td>';
            html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs">Einfügen</button></td>';
            html += '</tr>';
        $('#user_data tbody').prepend(html);
    );

    $(document).on('click', '#insert', function()
    
        var startart = $('#data1').text();
        var kennzeichen_id = $('#data2').text();
        var pilot_id = $('#data3').text();
        var begleiter_id = $('#data4').text();
        var startort_id = $('#data5').text();
        var startzeit = $('#data6').text();
        var landeort_id = $('#data7').text();
        var landezeit = $('#data8').text();
        var dauer = $('#data9').text();
        var bemerkung = $('#data10').text();

        if(kennzeichen_id != '' && pilot_id != '' && begleiter_id != '' && startort_id != '' && landeort_id != '' )
        
        $.ajax(
        
            url:"insert.php",
            method:"POST",
            data: 
                startart:startart, 
                kennzeichen_id:kennzeichen_id, 
                pilot_id:pilot_id, 
                begleiter_id:begleiter_id,
                startort_id:startort_id, 
                startzeit:startzeit, 
                landeort_id:landeort_id, 
                landezeit:landezeit,
                dauer:dauer, 
                bemerkung:bemerkung
            ,
            success:function(data)
            
                $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
                $('#user_data').DataTable().destroy();
                fetch_data();
            
            );
            setInterval(function()
            
                $('#alert_message').html('');
            , 5000);
        
        else
        
            alert("Kennzeichen, Pilot, Begleiter, Startort und Landeort sind min. benötigt");
        
    );

顶部的add函数用于向我的表中添加新行，下面的insert函数用于将其插入到我的表中。

我已经可以使用文本字段输入文本，但我必须更改它，以便使用下拉菜单来选择项目。

我添加了一个选择标签，其中包含用于选择其中一项的选项并显示出来。但无论我选择什么，插入到我的表中的值都是第一个选项。

我希望我展示了我的问题，你们中的一些人可以帮助我。

编辑：它的外观图片：

【问题讨论】：

问题在于页面上的id 属性必须是唯一的。改用类。

考虑$('#data8') - 应该选择什么元素？第一的？第二？第四？

我添加了一张图片来澄清。现在我只想将第一列的选定值添加到我的数据库中，但无论我选择什么，它都会输入“S”。

【参考方案1】：

找到答案。 我不得不改变：

        var startart = $('#data1').text();

到：

        var startart = $('#data1').val();