POST <option>text instead of value

Question

I am trying to submit the text instead of the value of the option.

I have dependent SELECTS and that's why I cannot put the actual text in the value field.

This is my dependent select

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

and this is the JS I am using

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

I know that I can аssign the text within the <option> to a hidden field and use it to submit the text and for that, I can use this

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

And firing it with onchange="setTextField(this)" on the <select>

Using

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

So the problem is that when I use the onchange="setTextField(this)" it brakes the whole js for the dependent selects.

Any idea of how to combine onchange="setTextField(this)" with

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

so it adds the option text to the hidden input? I need to get the text from both Category and SubCategory

Answer 1

The problem is that change handler is removing all the options from $SubCategory that aren't related to the selected category. Then if you change the category again, the subcategory options for the new category are no longer there to put back.

Instead of using .html() to replace the contents of the $SubCategory <select> , you should just hide or show the options.

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

There's no problem with setTextField() . But as a comment said, a better idea would be to use a different attribute to relate subcategories to categories, rather than the 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>

Then you can use this.dataset.category instead of this.value in the above code.