如何使用 html 标签中的选择性选项更改输出文本

Question

我有这个代码：

<ul class="quick-contact">
    <li class="phone"><strong>Sales: </strong>0987 989898</li>
    <li class="email"><strong>Email: </strong><a href="#" title="Sample link">info@yourdomain.com</a></li>
    <li class="sites"><strong>Sites: </strong><select class="inputbox"><option>USA</option><option>UK</option><option>France</option><option>Japan</option><option>South Africa</option></select></li>
</ul>

我希望销售数量随每个选择的选项而变化。如果有人有任何想法，我非常感谢所有答案

Answer 1

您需要使用 Javascript 来实现此功能。

工作代码段：

// comments inline

var salesNumbers = {  // store all phone numbers in an object here
  'USA': '123 123',   // you can easily add/remove/modify the country/numbers here
  'UK': '456 456',
  'France': '789 789',
  'Japan': '111 222',
  'South Africa': '333 444'
}

function updateSalesNumber(){  // this will be called when dropdown value will be changed
  var inputBox = document.getElementById("inputbox"); 
  
  // get the selected option
  var selectedOption = inputBox.options[inputBox.selectedIndex].value;
  
  // update the number on the webpage
  document.getElementById("sales-number").innerHTML = salesNumbers[selectedOption];
}

<ul class="quick-contact">
    <li class="phone"><strong>Sales: </strong><span id="sales-number">0987 989898</span></li>
    <li class="email"><strong>Email: </strong><a href="#" title="Sample link">info@yourdomain.com</a></li>
    <li class="sites"><strong>Sites: </strong>
      <select id="inputbox" onchange="updateSalesNumber()">
        <option value="USA">USA</option>
        <option value="USA">UK</option>
        <option value="France">France</option>
        <option value="Japan">Japan</option>
        <option value="South Africa">South Africa</option>
      </select>
  </li>
</ul>

Answer 2

您将需要使用 javascript 或 jQuery 来做您想做的事。这是在 DOM.

中操作值的唯一方法

不同的人会给你不同的答案。但这是一个使用 jQuery.

的简单选项

我已经写了一个 jQuery 示例，但如果您需要一个纯 javascript 示例，请告诉我。

基本上，您的所有选项都需要一个值，其中包含与之对应的 phone 数字。（例如美国及其 phone 数字的值）。

当 select 框更改时，它会更新销售编号。我添加了一个带有 class 的额外跨度，以便于更新。

http://jsfiddle.net/williamtdavies/6621wd1j/

<ul class="quick-contact">
    <li class="phone"><strong>Sales: </strong><span class="phone__number">0987 989898</span></li>
    <li class="email"><strong>Email: </strong><a href="#" title="Sample link">info@yourdomain.com</a></li>
    <li class="sites"><strong>Sites: </strong><select class="inputbox"><option value="123">USA</option><option value="456">UK</option><option value="789">France</option><option value="101112">Japan</option><option value="131415">South Africa</option></select></li>
</ul>

// Function to update the sales phone number
function changePhoneNumber(phoneNumber){ 
   // Writes HTML into the span with class "phone__number"
   $('.phone__number').html(phoneNumber);
}

// Change event calls the function to update the sales number
// Passes the new value after change into the function
$('.inputbox').on('change', function(){
   var phoneNumber = $(this).val();
    changePhoneNumber(phoneNumber);
});

// Calls the function on load in case the select box selection has remained from a previous change
$(document).ready(function(){
    changePhoneNumber($('.inputbox').val());
});

Answer 3

包括jQuery并在下面使用js

var inputBox = $(".inputbox"),
      countryNumber = $('#country-number');

console.log(inputBox.length);

function updateSalesNumber(){
  countryNumber.text(inputBox.val());
}

inputBox.on('change', function(){
    updateSalesNumber();
})

下面使用html...

<ul class="quick-contact">
    <li class="phone"><strong>Sales: </strong> <span id="country-number">0987 989898</span></li>
    <li class="email"><strong>Email: </strong><a href="#" title="Sample link">info@yourdomain.com</a></li>
    <li class="sites"><strong>Sites: </strong><select class="inputbox"><option value="111111">USA</option><option value="222222">UK</option><option value="333333">France</option><option value="444444">Japan</option><option value="555555">South Africa</option></select></li>
</ul>

如何使用 html 标签中的选择性选项更改输出文本

How to Change output text with selective options in html tag

html

tags

select

options