Question

我有2个下拉列表

<select class="form-control" name="class" id="class">
   <option value="One">One</option>
   <option value="Two">Two</option>
</select>

<select class="form-control" name="section" id="section">
   <option value="A">A</option>
   <option value="B">B</option>
</select>

和下面的一个锚标签：

<a href="$root_url/**class**/**section**"></a>

现在，当我使用下拉菜单中的select class和section时，我想更改锚标记中的 class 和 section 文本。

例如，如果从下拉列表中选择类“ One”和“ A”部分，则该类和部分文本将替换为“ One”和“ A”

选择下拉菜单后，其外观类似于<a href="$root_url/One/A"></a>。我需要它来改变生活。因此，当我点击锚标记时，它将重定向我到链接。

Answer 1

我要做的是，每次更改选择项之一时，都重新构建URL。想法很简单，将每个选择值保存在变量中。然后，为change事件中的每个select添加一个函数，该函数将修改其各自的值并重建锚点的href。

下面的代码可以解决问题。

var classValue = $('#class').val();
var sectionValue = $('#section').val();
var anchor = $('#target-anchor');

$('#class').on('change', function() {
  classValue = $(this).val();
  buildHref();
})

$('#section').on('change', function() {
  sectionValue = $(this).val();
  buildHref();
})

function buildHref() {
  $(anchor).attr("href", "$root_url/" + classValue + "/" + sectionValue);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="form-control" name="class" id="class">
   <option value="One">One</option>
   <option value="Two">Two</option>
</select>

<select class="form-control" name="section" id="section">
   <option value="A">A</option>
   <option value="B">B</option>
</select>

<a id="target-anchor" href="$root_url/**class**/**section**"></a>

在多个下拉选择中更改锚标记中的多个文本

1 个答案: