如何在 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

包含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>

Answer 3

您需要使用 javascript 或 jQuery 来做您想做的事情。这是在 DOM 中操作值的唯一方法。

不同的人会给你不同的答案。但这里有一个使用 jQuery 的简单选项。

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

基本上，您需要为所有选项设置一个值，其中包含与其对应的电话号码。 （例如 USA 及其电话号码的值）。

更改选择框时，它会更新销售编号。我添加了一个带类的额外跨度，以使其更易于更新。

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());
});