如何将附加值添加到选择列表

时间:2019-02-05 09:03:33

标签: jquery html

更新:

我已将以下内容添加到“解决方案”选择列表中。现在,这将传递所选分辨率的“ RecordID”。但是,我现在正在尝试将“ RecordID”附加到Ajax提交中的formdata中。请参阅此问题的结尾。

我有一个脚本,其中包含“方向”选项的选择下拉列表:

方向选择列表:

<select name="orientation" id="orientation" class="datatext" required>
<option value="">Select orientation</option>
<option value="L">Landscape</option>
<option value="P">Portrait</option>
</select>

选择一个选项后,下面的脚本对另一个显示屏幕分辨率的选择列表执行过滤。

过滤脚本

$("#orientation").change(function() {
  if ($(this).data('options') === undefined) {
    $(this).data('options', $('#res option').clone());
  }
  var id = $(this).val();
  console.log("id", id);
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#res').html(options);
});

当前,这将为选定的选项值提供“ P”或“ L”。

分辨率选择列表,此列表以DisplayWidth和DisplayHeight的格式列出数据表中的许多屏幕分辨率。 为了使我能够进一步进行数据查找,我需要在包含不同分辨率的表中包括“ RecordID”,并将其用作所选分辨率上所选选项的值。 。 “ ScreenType”表的示例。

enter image description here

分辨率选择列表:

<select name="Resolution" class="datatext" id="res" required>
<option value=""></option>
<?php   do { ?>
  <option value="<?php echo $row_ScreenType['Orientation'];?>" data-value="<?php echo $row_ScreenType['RecordID'];?>"><?php echo $row_ScreenType['DisplayWidth']. " " . $row_ScreenType['DisplayHeight']?></option>
  <?php
  } while ($row_ScreenType = mysql_fetch_assoc($ScreenType));
    $rows = mysql_num_rows($ScreenType);
    if($rows > 0) {
      mysql_data_seek($ScreenType, 0);
      $row_ScreenType = mysql_fetch_assoc($ScreenType);
    }
?>
</select>

AJAX提交脚本

$(document).ready(function(){
$('#insert_screen').on("submit", function(event){

var dataid = $("#res option:selected").attr('data-value');
// The var "dataid" now has the value of the recordid. 
//How can I append that var to the formdata?

    console.log("Value", dataid);
    event.preventDefault();  
      var form = $('form')[2]; 
      var formData = new FormData(form);
    $.ajax({  
      url:"insert_new_screen.php",
      data: formData,
          method:"POST",
          cache: false,
      contentType: false,
      processData: false,  
      beforeSend:function(){  
        $('#insert').val("Inserting");  
      },  
      success:function(data){  
        $('#add_screen_modal').modal('hide');
            window.location.reload();
      }  
    });  

  });
});  

任何人都可以看到该怎么做。

在此先感谢您的帮助和时间。

0 个答案:

没有答案
相关问题