Question

我使用这个HTML和jQuery代码将图像作为下拉菜单的选择选项，但我不确定如何使用标准文本将值设置为POST选择下拉列表。该代码用于我制作的清单网站，因此图像具有复选标记和X.

我尝试POST的一个尝试是将method="POST"和onclick="<?php $checkVar01='check'; ?>或onclick="<?php $checkVar01='x'; ?>"添加到两个标签中，但它基本上没有意义，因为它似乎只输出＆＃39; X＆＃39;即使不点击标签也每次都有价值。我使用AJAX将值发布到另一个页面。

<table>
        <thead>
          <tr>
            <th colspan="4" id="timestamp">
            </th>
          </tr>
          <tr>
            <th>#</th>
            <th>Subject</th>
            <th>Status</th>
            <th>Comments</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Item 1</td>
            <td>Do something</td>
            <td>
              <div class="btn-group" style="margin:0px;">
                <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="javascript:void(0);" onclick="<?php $checkVar01='check'; ?>">OK <img src="../images/green_check.png" width="25em"/></a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" onclick="<?php $checkVar01='check'; ?>">NOK <img src="../images/x.png"  width="25em"/></a>
                  </li>
                </ul>
              </div>
            </td>
            <td><input id="comment01" type="text" class="form-control form-control-md" maxlength="50"></td>
          </tr>

<script>

  $(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    var imgSource = $(this).find('img').attr('src');
    var img = '<img src="' + imgSource + '" width="20em"/>';
    $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' ' + img + ' <span class="caret"></span>');
  });

$("#homeSubmitButton").click(function() {
    $.ajax({
      type: "POST",
      url: "../actions.php?action=submitForm",
      data: "&checkVar01=" + <?php echo $checkVar01; ?> + "&comment01=" + $("#comment01").val(),
      success: function(result) {
        alert("Your checksheet has been submitted!");
      }
    })
  })

Answer 1

HTML已经有一个复选框表单元素。您可以使用:checked伪选择器设置复选框（和单选按钮）的样式，以几乎任何您想要的方式显示。

https://paulund.co.uk/style-checkboxes-with-css

由于您使用的是真正的复选框，因此可以将它们放在正确的表单中。然后，您可以正常提交该表单，或者jQuery serialize the form并通过AJAX request将这些值发送到您的服务器。

Answer 2

我终于通过更改标签href和AJAX POST数据来实现这一目的：

<a href="javascript: var checkVar01='check';"><img src="../images/green_check.png" width="25em"/></a>

数据

data: "&checkVar01=" + checkVar01 + "&comment01=" + $("#comment01").val(),

POST-able图像下拉菜单

2 个答案: