Question

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

我有从属的SELECTS，这就是为什么我不能将实际文本放在value字段中的原因。

这是我的依赖选择

<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' );

因此将选项文本添加到隐藏的输入中？我需要同时从Category和SubCategory中获取文本

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字段。

<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。

POST <选项>文本而不是值

1 个答案: