// 00 - CANCEL
function cancel00()
{
alert("Cancel");
//
}
// 01 - Slide Options open and get the "selectmycode". VERY important.
$(document).ready(function()
{
//
$(".dropdown-link").on("click", function()
{
//
// These 3 variables need to be accessed below, or just the first variable and get the text input fields on click of proceed01.
var selectmycode = $(this).attr("data-selectedoption");
// So redundant as it is also down below in a text field.
var selectuser = $(this).attr("data-self");
var selectproduct = $(this).attr("data-record");
//
// Display Results - TEST purposes only.
alert("Process Code is: " + selectmycode);
//alert("The DATA is: " + selectmycode + '-' + selectuser + '-' + selectproduct);
//
});
});
// End of slide options open.
// 02 - PROCEED
function proceed01()
{
// Somehow, get the selectmycode from above. Then get the 2 text fields data.
var selecttest = document.querySelector(".mary").value;
//var selecttest = $(this).attr("data-user");
//var selecttest = $(this).attr("data-product");
//The below comment will stop ALL functions from working !!!
//How is that possible?
//It seems to see ?>"; at the end.
//var pepename31 = "<?php echo $pepename31 ?>";
//
// Action - Option
//
// Get the 3 variables to use with ajax POST.
//
// Display Results - TEST purposes only.
alert(selecttest);
//
}
// End of PROCEED
// This is an external file
$(document).ready(function()
{
$(".dropdown-link").on("click", function()
{
//
const tranSpeed = "slow";
//
// OPTIONAL - hide all dropdown containers.
//$(".dropdown-container").hide(tranSpeed);
//
// POSSIBLE ??? Get code variable and be able to access this value elsewhere.
//var selectmycode = $(this).attr("data-selectedoption");
//
// Get clicked option.
var selOption = $(this).data("selectedoption");
//
// Get next "here".
var here = $(this).closest(".bind_Name").next(".here");
//
// Populate stuff.
$(here).find("legend").text(`Option ${selOption}`);
//$(here).find("input[type=text]").val(`Option ${selOption}`);
//
// TO DETECT IF DATA HAS CHANGED.
var dataChanged = $(here).data("seloption") !== selOption;
$(here).data("seloption",selOption);
console.log(dataChanged)
//
// Show the dropdown if data changed.
var target = $(here).find(".dropdown-container");
//
// This will close all other open options.
$(".dropdown-container").not(target).hide(tranSpeed);
//
if(dataChanged)
{
$(target).show(tranSpeed);
}
else
{
// Or toggle it otherwise.
$(target).toggle(tranSpeed);
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<div class="bind_Area">
<div class="bind_Name">
<div class="dropdown">
<div class="dropdown-link"
data-selectedoption="01"
data-record="123456820"
data-self="123456830"
>01-Postpone
</div><!-- end of #dropdown-link -->
</div><!-- end of #dropdown -->
<div class="dropdown">
<div class="dropdown-link"
data-selectedoption="02"
data-record="123456820"
data-self="123456830"
>02-Approve
</div><!-- end of #dropdown-link -->
</div><!-- end of #dropdown -->
</div><!-- end of #bind_Name -->
<div class="here">
<div class="dropdown-container">
<fieldset>
<legend></legend>
<input type="text" class="peter"
data-user="123456820"
value="123456820"
>
<input type="text" class="mary"
data-product="123456830"
value="123456830"
>
<div><a href="" onclick="return false" onmousedown="proceed01()">PROCEED</a></div>
<div><a href="" onclick="return false" onmousedown="cancel00()">CANCEL</a></div>
</fieldset>
</div><!-- end of #dropdown-container -->
</div><!-- end of #here -->
<div class = "bind_Note"></div>
</div><!-- end of #bind_Area -->
<br>
<br>
<br>
<div class="bind_Area">
<div class="bind_Name">
<div class="dropdown">
<div class="dropdown-link"
data-selectedoption="01"
data-record="123456820"
data-self="123456831"
>01-Postpone
</div><!-- end of #dropdown-link -->
</div><!-- end of #dropdown -->
<div class="dropdown">
<div class="dropdown-link"
data-selectedoption="02"
data-record="123456820"
data-self="123456831"
>02-Approve
</div><!-- end of #dropdown-link -->
</div><!-- end of #dropdown -->
</div><!-- end of #bind_Name -->
<div class="here">
<div class="dropdown-container">
<fieldset>
<legend></legend>
<input type="text" class="peter"
data-user="123456820"
value="123456820"
>
<input type="text" class="mary"
data-product="123456831"
value="123456831"
>
<div><a href="" onclick="return false" onmousedown="proceed01()">PROCEED</a></div>
<div><a href="" onclick="return false" onmousedown="cancel00()">CANCEL</a></div>
</fieldset>
</div><!-- end of #dropdown-container -->
</div><!-- end of #here -->
<div class = "bind_Note"></div>
</div><!-- end of #bind_Area -->
<br>
<br>
<br>
<!-- etc ... -->
你好：
好的，我的脚本有多个问题，非常感谢您的帮助。我已经尝试了好几天了，但我还是没有。从根本上说，这是一个采购订单系统，经理在此系统中做出个人决策，并逐笔记录。我不知道它是否有影响，但是索引页面有4个类别的选项卡。我将所有这些都放在一个Codepen中：
https://codepen.io/lepew/pen/agNBzo
问题1：我有一个加载该页面的外部文件。多亏了Jon P，它是一个on.click函数，并且可以完美地工作。我需要这个数字来以后运行一些ajax。我尝试了许多从外部文件访问该值的可能性，但无法做到。它可以在内部函数中工作，但是如果我可以从外部文件中分配它，则可以保存一些代码...对吗？如果javascript变量是全局变量，为什么不能在另一个函数中访问该变量？可能是这样，我只是不知道如何。 // 问题2：我猜因为缺乏更好的JavaScript知识，我为html中显示的每个记录创建了数据字段（data-record和data-self）。我可以访问所需的那些变量，但是如果可能的话，我想在html文件中减少这些多余的字符。如果我可以解决问题5，则此问题无关紧要。
问题3：我有一个proce01函数，我想将其转换为ajax POST。我需要3个变量。第一个是选定的选项变量，请参见问题1。我希望从当前2个输入字段中获得其余2个变量。稍后将隐藏它们。如果可以从我的proce01函数中的on.click访问变量，则一切正常。如果我可以解决问题5，那么这也无关紧要。
问题4：这个我一生，我听不懂。在我的proced01函数中，我有以下评论。我的理解是，“ //”之后该行中的所有内容都将被忽略。当我运行文件并查看视图页面源代码时，它被弄乱了。由于某种原因，它不会忽略该行的后4个字符。那就是我的php的关闭。我也尝试过双引号，同样的事情。它将停止所有javascript函数的工作。我使用NotePad ++，有趣的是，当我将该行（带有注释）复制到php部分时，它也会看到最后4个字符并崩溃/停止。
// var pepename31 ='';
这是查看源代码时我的JavaScript中显示的内容：
// var pepename31 =“
// 通知：未定义的变量： 110
行的 C：\ xampp \ htdocs \ products \ index.php 中的pepename31 ;
问题5：好的，这是个大问题，procedure01（）。这是我要添加ajax并将3个变量发送到php（process.php）文件的地方。我需要选择的选项，以及当前的2个输入字段。选定的选项将根据值/字符串在php中触发不同的mysql查询。其他2个字段是当前用户ID（由于只有1个用户登录，因此是恒定的）和产品编号（因记录而异）。当我运行我拥有的代码时，它将获得当前用户，但是当涉及到当前产品编号时，它将仅通过记录字段获得第一个记录的产品编号，而不是当前产品编号。我尝试了很多选项，但是它只是行不通，包括为其分配数据字段并尝试使用ID /类名。