Question

当你用jquery点击按钮时，我正在创建一个模态（bootstrap模态）作为字符串，我的模态中有两个选项类是

cp -a和Call Today到目前为止它已经很好了。

当我点击按钮时我的模态一直在创建，这就是为什么我在我的按钮中添加了两个属性Call Tomorrow和data-open-hours，我想通过一个例子解释我想要的东西：

例如：

我的data-closed-hours是：data-open-hours 我的09:00：data-closed-hours

然后使用22:00选项将.when-call从09:00选择加至22:00

因此，如果您选择Call Now，请将我的选择从Call Tomorrow填充到09:00，而不是22:00字符串。

我的工作范例：

Call Now

function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html =
    '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6"><select class="form-control"><option class="call-now">Call Now</option></select></div></div>';
  html = html + '</div></div></div></div>';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}


$(document).on("click", ".open-agency", function() {
  var openHours = $(this).data("open-hours");
  var closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});

.open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

CodePen Demo

Answer 1

我发现此代码存在一些问题，例如您的select没有名称，option没有价值，大多数class似乎应该是id代替......我建议您查看这些部分。

无论如何，使用你现有的东西，假设你想要从开始到结束每小时添加一个选项，你应该： - 使用正确的选项填充第二个select，解析您的打开/关闭时间; - 在change上为第一个select添加一个监听器，以添加/删除＆＃34;立即呼叫＆＃34; option

这应该有效，即使它非常粗糙

＆＃13;

function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html =
    '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">'+getOptions(openHours, closedHours, true)+'</select></div></div>';
  html = html + '</div></div></div></div>';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}


$(document).on("click", ".open-agency", function() {
  var openHours = $(this).data("open-hours");
  var closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});

function callNow() {
  return '<option class="call-now">Call Now</option>';
}

function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open,close,now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    options += '<option>Call at '+h+':00</option>'
  }
  return options;
}

$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  if($('.call-today').is(':selected')) 
    $('.hour-call').prepend(callNow());
});

＆＃13;

.open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00">See Agency</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

如何用jquery填充元素？

1 个答案: