javascript - 按下按钮时在电子邮件中显示 HTML 下拉选择

Question

我有一个表格，您可以通过选中复选框来选择某些行，然后单击按钮，它将打开一个电子邮件客户端并将这些选择粘贴到电子邮件正文中。这工作得很好。

我所困扰的是，我需要将其粘贴到下拉列表中的选择中，但无法将该功能集成到我的代码中。我怎样才能做到这一点？

HTML 选择:

<select id="pos-drop" onChange="updateinput();">
    <option selected disabled>POS - City</option>
        <?php foreach($pos->fetchAll() as $city) { ?>
        <option class="pos-city" value="<?php echo $city['POS'];?>"><?php echo $city['POS'];?></option>
        <?php } ?>
</select>

JavaScript...pos_city_selected 变量保存当前下拉列表选择:

var input_num;

var pos_city_selected;
var pos_city_selected1;

function updateinput() {
var pos_city = document.getElementById("pos-drop");
pos_city_selected = pos_city.options[pos_city.selectedIndex];
if (pos_city_selected) {
    pos_city_selected1 = true;
    }
console.log(pos_city_selected);
console.log(pos_city_selected1);
}

$(function($) {
    var RowData = (function(storage, storageKey) {
        var rowData = readFromSession();
        var dataItems = ['loc', 'rp-code', 'sku', 'special-id', 'description', 'quantity', 'unit'];
        var emailDelimiters = {
            'row': '%0D%0A',
            'dataItem': '\xa0\xa0'
        };
        function readFromSession() {
            return JSON.parse(storage.getItem(storageKey) || '{}');
        }
        function writeToSession() {
            storage.setItem(storageKey, JSON.stringify(rowData));
        }
        function writeRow(tr) {
            var $tr = $(tr),
                id = $tr.prop('id');
            if($tr.find('.check').is(':checked')) {
                rowData[id] = {};
                for(var i=0; i<dataItems.length; i++) {
                    rowData[id][dataItems[i]] = $tr.find('.' + dataItems[i]).text();
                }

                input_num = rowData[id].quantity_num = $tr.find('.spinner').val(); // if using HTML5 <input type="number">
            } else {
                delete rowData[id];
            }
            writeToSession();
        }
        function readRow(tr) {
            // restore tr's checkbox and spinner value from stored data
            var $tr = $(tr),
                id = $tr.prop('id'),
                row = rowData[id];
            if(row) {
                $tr.find('.check').prop('checked', true).end()
                     // .find('.spinner').spinner('value', row.quantity_num); // if using spinner widget
                     .find('.spinner').val(row.quantity_num); // if using HTML5 <input type="number">
            }
        }
        function toEmailString() {
            return $.map(rowData, function(row, id) {
                return $.map(row, window.encodeURIComponent).join(emailDelimiters.dataItem);
            });
        }
        // selectively expose functions as methods of RowData
        return {
            'writeRow': writeRow,
            'readRow': readRow, 
            'toEmailString': toEmailString
        };
    })(window.sessionStorage, 'checkedRowData');

    $('#merchTable').on('change', '.check', function() { // on changing a table row ...
        RowData.writeRow($(this).closest('tr').get(0)); // ... set the corresponding row object in RowData and sessionStorage
    }).on('change', '.spinner', function() { // on leaving a spinner widget
        RowData.writeRow($(this).closest('tr').get(0));
    });
    $('#checkout').on('click', function() { // on clicking the [Checkout] button        

        console.log(input_num);
        if (input_num > quantity_num) {
            alert("The entered number cannot be greater than the quantity.");
        } else if (pos_city_selected1 != true) {
            alert("Please select a POS-City from the dropdown list.");
        } else {

        var link = "mailto:me@example.com" + "?subject=" + encodeURIComponent("Order") + "&body=" + RowData.toEmailString();
        console.log(link);
        window.location.href = link;
        }
    });

    // Call this function on completion of every pagination/search
    function restoreVisibleRows() {
        $('#merchTable tbody tr').get().forEach(RowData.readRow);
    }

    restoreVisibleRows();

});

Answer 1

建议的方法:

• 删除这三个变量，input_num 等以及function updateinput() {...}，以及任何提及它们的内容。
• 添加一个公共(public)RowData.validityCheck()方法，如果在rowData中遇到错误，例如输入的数量大于其相应的可用数量，则该方法会抛出异常。
• 在 #checkout 的点击处理程序中使用 try{} catch{} 结构来编排有效性检查并采取相应措施，如下所示:

$('#checkout').on('click', function() { // on clicking the [Checkout] button
    try {
        // (1) perform validity check on the selected rows
        RowData.validityCheck(); // will throw if error is detected

        // (2) perform validity check on the #pos_drop selection
        var pos_city =  $("#pos-drop").val();
        if (!pos_city) {
            throw new Error('Please select a POS-City from the dropdown list.');
        }
        // (3) perform any further validity checks here (and throw accordingly)

        // Execution will only reach this point if no validity error is encountered.
        var link = "mailto:me@example.com" + "?subject=" + encodeURIComponent("Order") + "&body=Location: " + pos_city + '%0D%0A' + RowData.toEmailString(); // check that delimiter.
        console.log(link);
        window.location.href = link;
    } 
    catch(e) {
        console.error(e);
        $('#userMessage').text(e.message); // element #userMessage - eg a <span> - needs to exist somewhere on the page
    }
});