javascript - POST <选项>文本而不是值

Question

我正在尝试提交文本而不是选项的值。

我有依赖的 SELECTS，这就是为什么我无法将实际文本放入值字段的原因。

这是我的依赖选择

<select class="form-control" name="Category" id="Category" >
                <option value="1">Restaurants</option>
                <option value="2">Coffee Shops, Patisseries, Bakeries</option>
                <option value="3">Bars and Pubs</option>
</select>

<select class="form-control" name="SubCategory" id="SubCategory">
<option value="1">Home Made Food</option>
                <option value="1">Gardens and Outdoor</option>
                <option value="1">Food Delivery</option>
                <option value="2">Coffee Shop</option>
                <option value="2">Patisserie</option>
                <option value="2">Bakery</option>
                <option value="3">Bar</option>
                <option value="3">Pub</option>
                <option value="3">Wine Bar</option>
                <option value="3">Life Music</option>
                <option value="3">Night club</option>
</select>

这是我正在使用的 JS

var $Category = $( '#Category' ),
    $SubCategory = $( '#SubCategory' ),
    $options = $SubCategory.find( 'option' );
$Category.on( 'change', function() {
    $SubCategory.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );

我知道我可以在<option>内分配文本到隐藏字段并使用它来提交文本，为此，我可以使用这个

<input id="category_text" type = "hidden" name = "category_text" value = "" />

并使用 onchange="setTextField(this)" 来触发它关于<select>

使用

function setTextField(ddl) {
    document.getElementById('category_text').value = ddl.options[ddl.selectedIndex].text;
}

所以问题是当我使用onchange="setTextField(this)"时它会阻止依赖选择的整个 js。

关于如何组合的任何想法onchange="setTextField(this)"与

var $Category = $( '#Category' ),
    $SubCategory = $( '#SubCategory' ),
    $options = $SubCategory.find( 'option' );
$Category.on( 'change', function() {
    $SubCategory.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );

所以它将选项文本添加到隐藏输入中？ 我需要从类别和子类别获取文本

Answer 1

问题是 change处理程序正在删除 $SubCategory 中的所有选项与所选类别无关的内容。然后，如果您再次更改类别，则新类别的子类别选项将不再放回。

而不是使用 .html()替换 $SubCategory 的内容<select> ，您应该隐藏或显示选项。

$Category.on( 'change', function() {
    var category = this.value;
    $SubCategory.find("option").attr("hidden", function() {
        return this.value != category;
    });
} ).trigger( 'change' );

setTextField()没有问题。但正如评论所说，更好的想法是使用不同的属性将子类别与类别相关联，而不是 value field 。

<option value="1">Home Made Food</option>
    <option data-category="1" value="Gardens and Outdoor">Gardens and Outdoor</option>
    <option data-category="1" value="Food Delivery">Food Delivery</option>
    <option data-category="2" value="Coffee Shop">Coffee Shop</option>
    <option data-category="2" value="Patisserie">Patisserie</option>
    <option data-category="2" value="Bakery">Bakery</option>
    <option data-category="3" value="Bar">Bar</option>
    <option data-category="3" value="Pub">Pub</option>
    <option data-category="3" value="Wine Bar">Wine Bar</option>
    <option data-category="3" value="Life Music">Life Music</option>
    <option data-category="3" value="Night club">Night club</option>
</select>

然后你可以使用this.dataset.category而不是this.value在上面的代码中。